onChangeがうまく動作しない

Question

下記HTMLにて、不良１～不良３に入力された合計を随時「不良合計」に表示させていのですが。

<label>不良1：<input id="a1" type="number" class="w200" name="a1" onChange="inputChange()"></label><br>
<label>不良2：<input id="a2" type="number" class="w200" name="a2" onChange="inputChange()"></label><br>
<label>不良3：<input id="a3" type="number" class="w200" name="a3" onChange="inputChange()"></label>

<input id="sum" type="number" name="不良合計">

function inputChange(){
	var a1 = document.getElementById( "a1" ).value;
	var a2 = document.getElementById( "a2" ).value;
	var a3 = document.getElementById( "a3" ).value;
	var sum = parseInt(a1)+parseInt(a2)+parseInt(a3);

	document.getElementById( "sum" ).value = sum ;
}

上記のようにすると動作しません（id="sum"のinputはa1～a3に値を入れても空欄のまま

a1~a3に value="??" と適当に初期値を入れ、inputChange関数の括りを無くして

	var a1 = document.getElementById( "a1" ).value;
	var a2 = document.getElementById( "a2" ).value;
	var a3 = document.getElementById( "a3" ).value;
	var sum = parseInt(a1)+parseInt(a2)+parseInt(a3);

	document.getElementById( "sum" ).value = sum ;

だけにしてやると、id="sum"にはちゃんと合計値が入ります。

Comments

[int32_t]

コードにとくに問題はないように見えます。3つのフィールドぜんぶ入力してフォーカスを移せばsumに合計が表示されるのでは。

[Take_it]

それが上手く動かないので質問投稿をしました。
理由は謎のままですがyambejpさんの回答のコードで意図した動作をしました。

[int32_t]

きっと質問文に書かれていないコードに原因があるのでしょう。

Answer 1

<script>
document.addEventListener('input', ()=>{
  sum.value=[...document.querySelectorAll('.w200')].reduce((x,y)=>x+Number(y.value),0);
});
</script>
<label>不良1：<input id="a1" type="number" class="w200" name="a1"></label><br>
<label>不良2：<input id="a2" type="number" class="w200" name="a2"></label><br>
<label>不良3：<input id="a3" type="number" class="w200" name="a3"></label>
<input id="sum" type="number" name="不良合計">

Comments

[Take_it]

意図した通りの動作をしました。ありがとうございます。

//なぜonChangeが上手く機能しなかったのかは謎のままですが。。。

[yambejp]

> なぜonChangeが上手く機能しなかった

parseInt("")はNaNですからNumberなどで処理すればよいでしょう

function inputChange(){
var a1 = document.getElementById( "a1" ).value;
var a2 = document.getElementById( "a2" ).value;
var a3 = document.getElementById( "a3" ).value;
var sum = Number(a1)+Number(a2)+Number(a3);
document.getElementById( "sum" ).value = sum ;
}

[Take_it]

ありがとうございます！parseIntは空文字はNaNになってしまうのですね。。
勉強不足でした。