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".

x and y are not jQuery properties, you want $("#sum").text($(this).val()+x);. Also, use getElementById instead of querySelector when you are grabbing just an ID. Also, you can use this.value instead of $(this).val() since it appears you're mixing native DOM and jQuery. — Sterling Archer
– Sterling Archer, Commented Jan 30, 2017 at 17:44

Pabs123 · Accepted Answer · 2017-01-30 17:49:18Z

2

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

answered Jan 30, 2017 at 17:49

Pabs123

3,43315 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

talemyn Over a year ago

You'd better parseInt() those values or our you're going to get some funky string concatenations. ;)

Pabs123 Over a year ago

How do you figure? they're already being converted using the unary plus on lines 2 and 3

talemyn Over a year ago

Oh shoot! My bad . . . I didn't see them (they are so small! :D ). Nicely done.

Snowmonkey · Accepted Answer · 2017-01-30 18:11:56Z

0

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.

edited Jan 30, 2017 at 18:11

answered Jan 30, 2017 at 17:49

Snowmonkey

3,7611 gold badge18 silver badges16 bronze badges

5 Comments

Bren Ginthom Over a year ago

Thank you, it works. But there is one mistake: if firstly I click on radio (not on input=number), system prints "NaN". @Snowmonkey

Snowmonkey Over a year ago

That should be fixed. By moving the sum to a separate function, both actions will function exactly the same. And error checking are your friend.

Bren Ginthom Over a year ago

Thank you, it works. And finally I need one more thing: if I firstly select radio button and then key up on input=number, need to uncheck radio button for safety reasons. I tried to add this line: $("#y").checked = false; @Snowmonkey

Bren Ginthom Over a year ago

Ok, I just fixed with this line: document.getElementById('y').checked = false; It is ok to embed this code into jQuery?

Snowmonkey Over a year ago

not sure what you mean by "embed this into jQuery, you might simply want to save this into one of your external js files and load it along with whatever other scripts you do.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related