CODEWITHSUNDEEP
javascriptjqueryhtml
Bren Ginthom
Bren Ginthom

Reputation: 119

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

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:

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

Upvotes: 1

Views: 2894

Answers (2)

Snowmonkey
Snowmonkey

Reputation: 3761

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.

Upvotes: 0

Pabs123
Pabs123

Reputation: 3435

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

Upvotes: 2

Related Questions