入力が変更した際に変数の値を変えるにはどうしたらいいか

Question

２つの入力が変わる度に合計が増えるjavascriptを書きたいのですが、どうしたらいいかわかりません。
changeを使うところまではできたのですが、詳しい方教えてもらえないでしょうか。

<input type="number" id="input-desu1" value=0>
<input type="number" id="input-desu2" value=0>
<input type="text" id='goukei-desu' readonly>

const input1 = document.querySelector('#input-desu1');
const input2 = document.querySelector('#input-desu2');
const sum = document.querySelector('#goukei-desu');

input1.addEventListener('change', (event) => {
  sum.value = sum.value + `${event.target.value}`;
});

input2.addEventListener('change', (event) => {
  sum.value = sum.value + `${event.target.value}`;
});

Answer 1

document.addEventListener('input',()=>{
  const input1 = document.querySelector('#input-desu1');
  const input2 = document.querySelector('#input-desu2');
  const sum = document.querySelector('#goukei-desu');
  sum.value=parseFloat(input1.value)+parseFloat(input2.value);
});

Answer 2

追記　yambejp様の回答をよく見て理解を深めていただくとレベルアップにつながります。

ざっくり解説。
inputへイベントとしてあげることで、個別にイベントを指定する必要が無くなります。
input1、2の合計が取れればいいので、直接取得して合計することで『クリックした要素の値』とする必要が無くなります。
parseFloat()を選ばれた理由は僕ではわかりかねますが、直接入力できるから整数以外をサポートされたのかなぁと愚考いたします。※stepで刻み値を規定していないからかなぁと※

以下チラシ裏程度の回答でございます。

そのまま値を取ると文字列扱いだったため、これを解消するために*1してやります。※数字に変わる
sum.valueの合計はinput1、2を足したものなので素直にそう記述してあげます。

input1.addEventListener('change', (event) => {
  sum.value = input2.value * 1 + `${event.target.value}` * 1;
});

input2.addEventListener('change', (event) => {
  sum.value = input1.value * 1 + `${event.target.value}` * 1;
});

以下のコードのように直すと、合計の値に変化させているinputの値を足して合計の値にしてしまいます。
※増えている数字（現在の合計）をベースに、更にその上にinputの値を積み上げてしまう※
※ちょっと説明しづらいので、興味がおありでしたら実際に試してみてくださいね※

sum.value = sum.value * 1 + `${event.target.value} * 1`;

以下蛇足です。
他の方から突っ込み入るかなぁ？という感じです。
「ちゃんと型の変更を使いましょう」と言われるかもしれません。

Comments

[supermaruetsu]

解説本当に有り難いです。回答のみだと十分に理解ができなかったです。js難しいですね。