入力の値を取得する方法と合計を合計する

Question

これは私がしようとしている、私は入力フィールドのすべてのデータを取得するjavascriptを使用して、別の入力にすべてのフィールドの合計を入れます。しかし、私はエラーを取得して、合計の値はnullまたは空白です。誰かがこれについて私を助けることができますか？または、エラーの原因を突き止めてください。

ここでは、入力用のHTMLコードは、コードを小さくするためのすべてのフィールドを含むわけではありません。

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

 
    \t \t \t var total = ma + qu + hss + attt + laboo + acttt + recitss; 
 

 
\t \t \t document.getElementById('totals').innerHTML = total;

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

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

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

 

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

 

 
here's my js. this code is inside in the `success function` of `ajax`.

Answer 1

使用valueプロパティは、ありませんtextContent/innerHTMLはvalue

また、あなたがDOMはないいくつかの要素にアクセスしていることに注意してくださいInput-Elementから、私はそれらのステートメントから削除したを取得しますデモ

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> 

あなたが唯一のあなたの体の一部を示す...親切にこのよう

Answer 3

ようなスクリプトを実行しますあなたは

<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

あなたはvalプロパティを使用して、入力要素の値を取得または設定することができます。

• 入力要素から値を取得し、総入力フィールドの値

ここ

を設定した値

を合計コードは次のとおりです。

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

はあなたをチェックJsfiddle

これはシンプルで最適化された方法です。 valプロパティについての詳細を読むhere