Joshua Joshua - 3 months ago 7
jQuery Question

How to take users input, modify it, then display it in JQuery?

I am trying to make a unit converter, I will have the user enter a numeric value in a text box, select a unit type(lbs, g, oz etc...) from a select element, then do some simple multiplication to get the conversion, then finally, the part I am having trouble with, display the conversion result in a designated area. I can not get the text to change to the conversion result. I only have one conversion coded so far and that is pounds to grams, because I want to be able to display the text before I code the rest of them. Thank you and any input helps!

var main = function() {
var rslt = $('#result').val;
var num = $('#nmbr').val();
var inpt = $('#slct1').val();
var outpt = $('#slct2').val();
var bttn = $('.sbs');
$('.sbs').click(function(){
if(inpt == 'pounds'){
if(outpt == 'grams') {
var pGrams = num * 453.592;
$('#result').text(pGrams);
}
}
})
}

$(document).ready(main);


full code: https://jsfiddle.net/drzb6frk/

Answer

Try this javascript code:

var main = function() {
  var bttn = $('.sbs');
  $('.sbs').click(function(){
    var rslt = $('#result').val;
    var num = $('#nmbr').val();
    var inpt = $('#slct1').val();
    var outpt = $('#slct2').val();
    if(inpt == 'pounds'){
      if(outpt == 'grams') {
        var pGrams = num * 453.592;
        $('#result').text(pGrams);
      }
    }
  })
}

$(document).ready(main);
Comments