How do I get the sum of three inputs values in a span using JavaScript or jQuery?

user_15412266 0
Viewed 348

I only have an only positive value for the input.

var input  = $('[name="1"],[name="2"],[name="3"]'),
    input1 = $('[name="1"]'),
    input2 = $('[name="2"]'),
    input3 = $('[name="3"]'),
    input4 = $('[name="4"]');

input.change(function() {
    var val1 = (isNaN(parseInt(input1.val()))) ? 0 : parseInt(input1.val());
    var val2 = (isNaN(parseInt(input2.val()))) ? 0 : parseInt(input2.val());
    var val3 = (isNaN(parseInt(input3.val()))) ? 0 : parseInt(input3.val());
    input4.val(val1 + val2 + val3);
});
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<input type="number" id="number1" name="1" min="0" max="8"  value="0" />
<input type="number" id="number3" name="3" min="0" max="8"  value="0" />
<input type="number" id="number2" name="2" min="0" max="8"  value="0" />
<input type="number" id="number3" name="3" min="0" max="8"  value="0" />
<span class="total-select" name="4">0</span>
How to get an answer at runtime (without any click to get an answer) in the span.

html jquery javascript
3 Answers

You can use each loop to iterate through your inputs and get required value from each inputs add them and then use $(".total-select").text(val); to same inside your span

Demo Code :

$("input[type=number]").change(function() {
  var val = 0;
  //loop through each inputs
  $("input[type=number]").each(function() {
    //sum values
    val += parseInt($(this).val())
  })
  //put in span
  $(".total-select").text(val);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="number1" name="1" min="0" max="8" value="0" />
<input type="number" id="number3" name="3" min="0" max="8" value="0" />
<input type="number" id="number2" name="2" min="0" max="8" value="0" />
<input type="number" id="number4" name="3" min="0" max="8" value="0" />
<span class="total-select" name="4">0</span>

user_106064000

Try this, your snippet have a many typo. use parseInt(input1.val())|0 to check and get a value, if value is NaN, then value = 0

var input  = $('[name="1"],[name="2"],[name="3"]'),
    input1 = $('[name="1"]'),
    input2 = $('[name="2"]'),
    input3 = $('[name="3"]'),
    input4 = $('[name="4"]');

input.change(function() {
    var val1 = parseInt(input1.val())|0;
    var val2 = parseInt(input2.val())|0;
    var val3 = parseInt(input3.val())|0;
    input4.html(val1 + val2 + val3);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" id="number1" name="1" min="0" max="8"  value="0" />+
<input type="number" id="number2" name="2" min="0" max="8"  value="0" />+
<input type="number" id="number3" name="3" min="0" max="8"  value="0" />=
<span class="total-select" name="4">0</span>

user_109989710

Taking into account that you can obtain the sum of the numbers contained in an array using the Array.prototype.reduce method:

const arr = [1, 2, 3, 4, 5];
const total = arr.reduce((sum, n) => sum + n, 0);
console.log(total);

You could use the toArray jQuery method to convert the jQuery input selection to an array, and apply the same technique to get the result:

const inputs = $('input[type="number"]');
const span = $('span[name="4"]');

inputs.on("change", () => {
  span.text(
    inputs.toArray().reduce((sum, item) => sum += (+item.value || 0), 0)
  );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="number1" name="1" min="0" max="8"  value="0" />
<input type="number" id="number3" name="3" min="0" max="8"  value="0" />
<input type="number" id="number2" name="2" min="0" max="8"  value="0" />
<span name="4">0</span>

user_20353540
Related