nethken nethken - 3 months ago 8
Javascript Question

How to get the value of input and sum the total

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

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>