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>
(Visited 1,339 times, 1 visits today)