How to get the value of input and sum the total

Question

This i'm trying to do, I want to get all the data in input fields using javascript and put the sum of all the fields in another input. But im getting an error, the value of total is null or blank. Can someone help me about this? Or give me clue what's causing the error.

Here my html code for the inputs i will not include all of the fields to lessen the code.

  var ma = +(document.getElementById('majore').textContent); var qu = +(document.getElementById('quize').textContent); var hss = +(document.getElementById('hs').textContent); var attt = +(document.getElementById('att').textContent); var laboo = +(document.getElementById('labo').textContent); var acttt = +(document.getElementById('act').textContent); var recitss = +(document.getElementById('recits').textContent); var total = ma + qu + hss + attt + laboo + acttt + recitss; document.getElementById('totals').innerHTML = total; 

 <div class="well me"> <label for="majore">Major Exam</label> <div class="input-group"> <input type="text" class="form-control majore" id="majore"/> <span class="input-group-addon"> <i class="fa fa-percent"></i> </span> </div> </div> <div class="well quize"> <label for="quize">Quizzes</label> <div class="input-group"> <input type="text" class="form-control quize" id="quize"/> <span class="input-group-addon"> <i class="fa fa-percent"></i> </span> </div> </div> <div class="well hos"> <label for="hs">Homework/Seatwork</label> <div class="input-group"> <input type="text" class="form-control hs" id="hs"/> <span class="input-group-addon"> <i class="fa fa-percent"></i> </span> </div> </div> <div class="well total"> <label for="total">Total/label> <div class="input-group"> <input type="text" class="form-control total" id="totals"/> <span class="input-group-addon"> <i class="fa fa-percent"></i> </span> </div> </div> here's my js. this code is inside in the `success function` of `ajax`. 

Answer 1

Use value property, not textContent/innerHTML to get the value from Input-Element

Also note that you are accessing few elements which are not in the DOM , I have removed those statements from Demo

 var ma = +(document.getElementById('majore').value); var qu = +(document.getElementById('quize').value); var hss = +(document.getElementById('hs').value); var total = ma + qu + hss; document.getElementById('totals').value = total; 

 <div class="well me"> <label for="majore">Major Exam</label> <div class="input-group"> <input type="text" class="form-control majore" id="majore" value="10" /> <span class="input-group-addon"> <i class="fa fa-percent"></i> </span> </div> </div> <div class="well quize"> <label for="quize">Quizzes</label> <div class="input-group"> <input type="text" class="form-control quize" id="quize" value="10" /> <span class="input-group-addon"> <i class="fa fa-percent"></i> </span> </div> </div> <div class="well hos"> <label for="hs">Homework/Seatwork</label> <div class="input-group"> <input type="text" class="form-control hs" id="hs" value="10" /> <span class="input-group-addon"> <i class="fa fa-percent"></i> </span> </div> </div> <div class="well total"> <label for="total">Total/label> <div class="input-group"> <input type="text" class="form-control total" id="totals" /> <span class="input-group-addon"> <i class="fa fa-percent"></i> </span> </div> </div> 

Answer 2

function numberSum(N) {
 var total = 0;
  for(var i = 1; i <= N; i++){
  total += i;
  }
  return total;

}

function run(){
val = document.getElementById("val").value;
document.getElementById("results").innerHTML=val+": "+numberSum(val)
}
<input id="val">
<input type="Submit" onclick="run();">
 <p id="results"></p>

Your showing only your body part ...kindly do the script like this way

Answer 3

You may try this code

<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
    <input type="text" class="form-control majore" id="majore"  onchange="sum()"/>
    <span class="input-group-addon">
        <i class="fa fa-percent"></i>
    </span>
</div>

<div class="well quize">
<label for="quize">Quizzes</label>
<div class="input-group">
    <input type="text" class="form-control quize" id="quize" onchange="sum()"/>
    <span class="input-group-addon">
        <i class="fa fa-percent"></i>
    </span>
</div>

<div class="well hos">
<label for="hs">Homework/Seatwork</label>
<div class="input-group">
    <input type="text" class="form-control hs" id="hs" onchange="sum()"/>
    <span class="input-group-addon">
        <i class="fa fa-percent"></i>
    </span>
</div>

<div class="well total">
<label for="total">Total</label>
<div class="input-group" id="totals">
        <input type="text" class="form-control total" id="totals"/>
        <span class="input-group-addon">
            <i class="fa fa-percent"></i>
        </span>
    </div>

<script>
function sum() {
    var ma = parseInt(document.getElementById('majore').value);
    var qu = parseInt(document.getElementById('quize').value);
    var hss = parseInt(document.getElementById('hs').value);
    var totals = ma + qu + hss;
    document.getElementById('totals').innerHTML = totals;
}</script>

Answer 4

You can get or set the value for the input element using val property.

• Get the value from the input element and sum the values
• Set the value for the total input field

Here is the Code :

var total = +($('#majore').val()) + +($('#quize').val()) + +($('#hs').val()); 
$('#totals').val(total);

Check your output in Jsfiddle

This is simple and optimized way. Read more about val property here