JavaScript: how to sum values of variables and display as div?

Question

I am new user at JS and I am trying to sum 2 values from HTML input.

The problem: I have 3 HTML input's:

• Input by type=number (select number from input field);
• 2 inputs with type=radio

I want to sum the value of the number field with value of the selected radio button in real time (using jQuery).

JS:

$('#quantity').click(function () {
    $('#sum').text($(this).val());
});

$('#y').click(function () {
    var y = document.querySelector('#y').value;
    $('#sum').text($(this).val()).y;
}); 

$('#x').click(function () {
    var x = document.querySelector('#x').value;
    $('#sum').text($(this).val()).x;
}); 

HTML:

<form>
    <input id="quantity" type="number">
    <input id="y" name="math" type="radio" value="0">
    <input id="x" name="math" type="radio" value="1">
</form>
<span id="sum"></span>

I just want to add the value of the selected radio input to the value in the "quantity" field.

Example: If the value of the "quantity" field is "100" and I click on the "x" radio button (value = 1), then print "101".

Answer 1

Add an id to your form (I used myForm here for example) and then try something along these lines:

$('#myForm input').change(function() {
  var quantityVal = +$('#quantity').val();
  var radioVal = +$('[name="math"]:checked').val();
  var sum = quantityVal + radioVal;
  $('#sum').text(sum)
});

Here we're adding a change listener to all the inputs in the form, so that if any of them change in any way (not click like you had) the function will run. We then use jQuery to grab the value from the quantity input as well as the radio which is checked . You'll notice we also use unary + for both to make sure they are cast to integers.

Finally we just set the value of the sum span. The above should get you most of the way there, though you should probably add some error checking for empty radio values (or set a default one).

Live example here

Answer 2

How about this?

 // Any time this is edited, update $('#quantity').on("input", function() { $('#sum').text(sumThem() ); }); // ANY radio button with the name math // gets clicked, we do this ONE function. $('[name=math]').click(function() { $('#sum').text(sumThem() ); }); function sumThem(){ var qty = parseInt($("#quantity").val()) || 0; var addend = parseInt($("[name=math]:checked").val()) || 0; return qty + addend; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input id="quantity" type="number"> <input id="y" name="math" type="radio" value="0"> <input id="x" name="math" type="radio" value="1"> </form> <span id="sum"></span> 

There were a couple small problems: First, when the text input was updated, it wasn't adding in the radio button. Second, if no radio button was clicked, it was giving a NaN issue. Now, when you input on the text, if there's no radio clicked, the value is set to 0.