【JavaScript】input type numberの値を取得し計算する方法

evalという関数を使うとスムーズにinput type numberで入力された値を数値として計算することができる。eval関数を使わないと入力された数値を結合するだけになってします。

HTML

<form action="" class="calc__form" name="calcForm">
  <dl>
    <div> 
      <dt>数値1</dt>
      <dd> <input type="number" name="number1" required> </dd>
    </div>
    <div> 
      <dt>数値2</dt>
      <dd> <input type="number" name="number2" required> </dd>
    </div>
    <div> 
      <dt>数値3</dt>
      <dd> <input type="number" name="number3" required> </dd>
    </div>
  </dl>
  <!--計算するボタン--><input type="buttom" value="計算する" onclick="calcBtn()" disabled>
  <!--//計算するボタン-->
  <dl>
    <div> 
      <dt>年間の還元額</dt>
      <dd>
        <div id="totalNum"></div>
      </dd>
    </div>
  </dl>
</form>

JavaScript

<script>
    function calcBtn() {
      const number1 = document.calcForm.number1;
      const number2 = document.calcForm.number2;
      const number3 = document.calcForm.number3;

      document.getElementById('totalNum').textContent = eval(number1.value) + eval(number2.value) + eval(number3.value);//入力された数値の合計を計算し、表示する
    };
  </script>