初心者向けの、HTMLとJavascriptの練習問題を解いています。
<問>
ユーザーに3つの数字を入力してもらい、それらを自動で掛け合わせた結果を表示するウェブページを作りなさい。
(Javascriptのalertやpromptは使わずに、HTMLのformを使いなさい)
<私の回答>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript</title>
</head>
<body>
<label for="first">The first number:</label>
<input type="number" id="first" name="first_number" />
<label for="second">The second number:</label>
<input type="number" id="second" name="second_number" />
<label for="third">The third number:</label>
<input type="number" id="third" name="third_number" />
<script>
let first = document.getElementById("first");
let second = document.getElementById("second");
let third = document.getElementById("third");
let ans = first * second * third;
console.log("The answer is : " + ans);
</script>
</body>
</html>
<結果>
3つの数字を入力するよう促すページが表示されました。
私のイメージは、3つの数字を入力すると、その下に掛け算された答えが表示されるというものです。しかし、答えは表示されず、3つの数字を入力することができるだけの状態です。
Developper toolのconsoleタグには、「The answer is : NaN」と表示されています。このコードが作動した瞬間に未入力の数値がNaNとして認識され、そのため回答もNaNと表示されているのだろうと考えています。
質問
3つの数字が入力された際にそれらを認識し、計算を始めるような順序が望ましいです。このような挙動にするためにはどのような修正が必要でしょうか。
Developer toolのconsoleタブではなく、ページ上に回答を表示させるにはどのような修正が必要でしょうか。
これら2点の問題を解決できれば、この問いを解けるのではないかと考えています。もし他に認識違いや課題がありましたら、教えて頂けると有難いです。
※VSCodeでコードを作成し、Google Chromeで表示させています。versionはいずれも最新です。OSはWindows 11です。
(追記)
練習問題は今習っているコースの講師から出されたもので、特にURLや書籍はありません。HTMLをまず習い、Javascriptを次に習い、それでは2つを合わせて使ってみましょうという段階です。最初にalertなどの機能を使って作ったページがありまして、「同じものをformで作れますか」と問われている状況です。
最初に作ったページはbodyに以下の記述を入れただけのものでした。
<script>
let x = parseInt(prompt("I will multiply threee numbers. What is the first number?"));
let y = parseInt(prompt("What is the second number?"));
let z = parseInt(prompt("What is the third number?"));
let ans = x * y * z;
alert("The answer is: " + ans);
</script>