前回では よくあるエラーを紹介しました。
今回は 前回のようなエラーを解決するにはどう考えればいいかをご紹介します。
以下では [ form-05.html ]を使うことにします。
[ form-05.html ]
<html>
<head>
<title>JavaScript form 05</title>
<body>
<p>
<label>入力値１<input type=”text” id=”input1″></label><br>
<label>入力値２<input type=”text” id=”input2″></label><br>
<input type=”button” value=”関数実行” id=”set”>
</p>
<script>
document.getElementById(“set”).onclick = function() {
const input1 = document.getElementById(“input1”).value;
const input2 = document.getElementById(“input2”).value;
let plus = input1+ input2;
document.write(“足し算 = ” + plus);
};
</script>
</body>
</html>
とウェブサイト上に表示されていると思います。
このサイト上の 入力値１ に 半角数字で 5 と入力して
このサイト上の 入力値２ に 半角数字で 8 と入力して 関数実行をクリックすると
足し算 = 58 とウェブサイト上の表示が変更されましたね。
これは
let plus = input1 + input2 とは
input1という文字列 と input2という文字列 をつないだものを plus に格納する
という意味だったからです。
つまり
5 という文字 と 8 という文字 をつないだ結果
plus = 58 となってしまったわけでした。
本当の目的は plus = 13 となることでしたので、これを実現するには
<script>
document.getElementById(“set”).onclick = function() {
const input1 = document.getElementById(“input1”).value;
const input2 = document.getElementById(“input2”).value;
// 💡 Number() を使って、文字を数字に変換してから足し算します
let plus = Number(input1) + Number(input2);
document.write(“足し算 = ” + plus);
};
</script>
と書き換えれば解決できます。
input1, input2 に入っていた値は 文字列 だったので
それを 数値 に Number() を使って変更して、 数値を足したものを plus に入れた
というわけです。
今度は画面に 「足し算 = 13」 と正しく表示されると思いますのでお試しください！