のonchangeイベントは、私は数字を入力するためのユーザーのための2つのテキスト入力を持つ

Question

私のjavascriptのコードを受け入れていない、と私は別のテキスト入力

<input id="attendance_1" onchange="parseInt(document.getElementById('attendance_output').value) += parseInt(this.value);" type="text" name="attendance_1" value="" /> 
 

 
<input id="attendance_2" onchange="parseInt(document.getElementById('attendance_output').value) += parseInt(this.value);" type="text" name="attendance_2" value="" /> 
 

 
// The results of adding the two text values should go here 
 
<input id="attendance_output" type="text" value="" />

に出力するページにこれら2つの数の合計をしたいと思います

私はエラーを取得する：

ReferenceError: invalid assignment left-hand side

Answer 1

あなたのonchangeのコードを関数に入れ、その関数をonclickで呼び出すことをお勧めします。物事をより簡単にデバッグすることができます。

例

function addValue(field) { 
    parseInt(document.getElementById('attendance_output').value) += parseInt(field.value); 
} 

<input id="attendance_1" onchange="addValue(this)" type="text" name="attendance_1" value="" /> 

<input id="attendance_2" onchange="parseInt(document.getElementById('attendance_output').value) += parseInt(this.value);" type="text" name="attendance_2" value="" /> 

// The results of adding the two text values should go here 
<input id="attendance_output" type="text" value="" /> 

しかし、問題は、あなたの計算は何も割り当てられていないこと、です。フィールドの値をとり、解析して、解析結果の値を試します。

フィールド値にその値を追加して割り当てたいと思いますか？

function addValue(field) { 
    var val = parseInt(document.getElementById('attendance_output').value); 
    val += parseInt(field.value); 
    document.getElementById('attendance_output').value = val; 
} 

Answer 2

以下のコードを試してください。それは動作するはずです。 + =サインイン式でコードが機能していません。

<input id="attendance_1" onchange="document.getElementById('attendance_output').value=parseInt(document.getElementById('attendance_output').value) + parseInt(this.value);" type="text" name="attendance_1" value="" /> 
 

 
<input id="attendance_2" onchange="document.getElementById('attendance_output').value=parseInt(document.getElementById('attendance_output').value) + parseInt(this.value);" type="text" name="attendance_2" value="" /> 
 

 
// The results of adding the two text values should go here 
 
<input id="attendance_output" type="text" value="" />

Answer 3

だから、これは本当にtypechecks

function addValue(field) { 
    parseInt(document.getElementById('attendance_output').value) += parseInt(field.value); 
} 

<input id="attendance_1" onchange="addValue(this)" type="text" name="attendance_1" value="" /> 

<input id="attendance_2" onchange="parseInt(document.getElementById('attendance_output').value) += parseInt(this.value);" type="text" name="attendance_2" value="" /> 

// The results of adding the two text values should go here 
<input id="attendance_output" type="text" value="" /> 

と基本的なJSあるしかし、問題は、あなたの計算は何も割り当てられていないこと、です。フィールドの値をとり、解析して、解析結果の値を試します。

フィールド値にその値を追加して割り当てたいと思いますか？

function addValue(field) { 
    var oVal = parseInt(document.getElementById('attendance_output').value); 
    var iVal = parseInt(field.value); 

    if(!oVal || Number.isNaN(oVal)) { 
     oVal = 0; 
    } 

    if(!iVal || Number.isNaN(iVal)) { 
     iVal = 0; 
    } 

    oVal = oVal + iVal; 

    document.getElementById('attendance_output').value = oVal; 
} 

Answer 4

これを試してください。 :)それは、ユーザー入力文字列の場合、正しく動作しませんので、検証が必要です。

function addValue() { 
var num1 = document.getElementById('attendance_1').value; 
var num2 = document.getElementById('attendance_2').value; 
if (num1 === ''){ 
    num1 = 0; 
} 
if(num2 === ''){ 
    num2 = 0; 
} 

    var sum = parseInt(num1) + parseInt(num2); 
    document.getElementById('attendance_output').value = sum; 

} 

あなたはjqueryの

$(document).ready(function() { 
$("#attendance_1, #attendance_2").keydown(function (e) { 
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || 
     (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) || 
     (e.keyCode >= 35 && e.keyCode <= 40)) { 
      return; 
    } 
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
     e.preventDefault(); 
    } 
    }); 
}); 

Answer 5

 
onchange="document.getElementById('attendance_output').value=+document.getElementById('attendance_output').value+ +this.value" 

が、それはあなたのために役立つことを願っています:)

Answer 6

内部の使用このコードを使用して、テキストボックスに数字だけを受け入れることができますこれはオプションかもしれません。私はインラインJSを完全に削除しました。 onchangeからoninputハンドラに移動しました。与えられた値が実際には文字列ではない数値である場合にのみ計算が行われます。

var inpt = document.querySelectorAll('.attendance'); 
 
var out = document.getElementById('attendance_output'); 
 

 
var onInput = function(e) { 
 
    if(/\d/.test(this.value)) { 
 
    var sum = [].slice.call(inpt).reduce(function(a, b) { 
 
     if (a.value.length && b.value.length) { 
 
     return +a.value + +b.value; 
 
     } else { 
 
     return +a.value || +b.value; 
 
     } 
 
    }) 
 
    out.value = sum || this.value; 
 
    } else { 
 
    out.value = ""; 
 
    } 
 
} 
 

 
inpt.forEach(function(el) { 
 
    el.addEventListener('input', onInput, false) 
 
})

<input class="attendance" type="text" name="attendance_1" value="" /> <span>+</span> 
 
<input class="attendance" type="text" name="attendance_2" value="" /> 
 

 
<br><br> 
 
<input id="attendance_output" type="text" value="" disabled />