inputに入力された値を足し算して特定の要素に表示

update:2021.2.2　4340view

inputに入力された値を足し算して特定の要素に表示

inputタグで入力された値を取得して足し算、特定の要素に合計を表示

ページ内で自動計算させたい時に意外とハマりました...(-_-;)

何にハマったかというと、、、全てのinputに入力値がないとエラーになるんです。それに気付かず、なぜなあぜ計算されないの？？？と違うことを試し続けていたのでした。

ではでは、まずinputタグと合計値のpタグは下記の感じにします。

      <input type="number" name="count1" id="count1" >
      <input type="number" name="count2" id="count2" >
      <input type="number" name="count3" id="count3" >
      <input type="number" name="count4" id="count4" >
      <input type="number" name="count5" id="count5" >
      <p id="total" ></p>

idにcountが最初にくる全てのinputタグを取得し、pのidがtotalの要素に足し算の合計値を出力させる。

javascriptです。

<script>
$(function() {
  $('input[id^="count"]').change(function() {
    //inputタグの値を取得
    var val01 = $('#count1').text();
    var val02 = $('#count2').text();
    var val03 = $('#count3').text();
    var val04 = $('#count4').text();
    var val05 = $('#count5').text();

    //取得した値がない場合は「0」を入れる←※ココ大事！
    val01 = val01 == '' ? 0 : val01;
    val02 = val02 == '' ? 0 : val02;
    val03 = val03 == '' ? 0 : val03;
    val04 = val04 == '' ? 0 : val04;
    val05 = val05 == '' ? 0 : val05;

    //整数値に変換し足し算をします。
    var val = parseInt(val01)+parseInt(val02)+parseInt(val03)+parseInt(val04)+parseInt(val05);
    //idがtotalの要素にテキストを書き換えます。
    $('#total').text(val);
  });
});
</script>

取得した値が空の状態で足し算をすると[NaN]になっちゃうんです。

ただ、、もっとシンプルな書き方がある気がするんだけど、今のところ思い付かない(;^_^A

だって、これinputタグが数十個増えたとするとinputタグの値を取得するのも0に置き換えるのも書き方が面倒っぽい。

ループで取得も0の置き換えもできるはず。ここは後ほど挑戦！