

初心者向けの、HTMLとJavascriptの練習問題を解いています。

> ＜問＞  
>  ユーザーに３つの数字を入力してもらい、それらを自動で掛け合わせた結果を表示するウェブページを作りなさい。  
>  （Javascriptのalertやpromptは使わずに、HTMLのformを使いなさい）

＜私の回答＞

[code]

    <!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>
    
[/code]

＜結果＞  
３つの数字を入力するよう促すページが表示されました。  
私のイメージは、３つの数字を入力すると、その下に掛け算された答えが表示されるというものです。しかし、答えは表示されず、３つの数字を入力することができるだけの状態です。

Developper toolのconsoleタグには、「The answer is :
NaN」と表示されています。このコードが作動した瞬間に未入力の数値がNaNとして認識され、そのため回答もNaNと表示されているのだろうと考えています。

### 質問

  * ３つの数字が入力された際にそれらを認識し、計算を始めるような順序が望ましいです。このような挙動にするためにはどのような修正が必要でしょうか。

  * Developer toolのconsoleタブではなく、ページ上に回答を表示させるにはどのような修正が必要でしょうか。

これら２点の問題を解決できれば、この問いを解けるのではないかと考えています。もし他に認識違いや課題がありましたら、教えて頂けると有難いです。

※VSCodeでコードを作成し、Google Chromeで表示させています。versionはいずれも最新です。OSはWindows 11です。

* * *

(追記)

練習問題は今習っているコースの講師から出されたもので、特にURLや書籍はありません。HTMLをまず習い、Javascriptを次に習い、それでは２つを合わせて使ってみましょうという段階です。最初にalertなどの機能を使って作ったページがありまして、「同じものをformで作れますか」と問われている状況です。

最初に作ったページはbodyに以下の記述を入れただけのものでした。

[code]

    <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>
    
[/code]


CC BY-SA 4.0
2022-12-22T11:42:12.313
92962
2022-12-23T02:08:20.303
2022-12-23T02:08:20.303
3060
question
javascript html form
自動で３つの数字を掛け合わせるページの作成


> このコードが作動した瞬間に未入力の数値がNaNとして認識され、そのため回答もNaNと表示されているのだろうと考えています。

`let first =
document.getElementById("first");`のコードで`first`変数に代入されるのは未入力の数値ではなく
**inputボックスそのもの** です。  
`let first = document.getElementById("first").value;`のように書き換えることで数値を変数に代入できます。

> ①３つの数字が入力された際にそれらを認識し、計算を始めるような順序が望ましいです。このような挙動にするためにはどのような修正が必要でしょうか。

「inputボックスに数字が入力された」すなわち「inputボックスの値が変化した」際に計算を始める関数を呼び出す修正をすることでお望みの順序で計算を始める挙動になります。

お手持ちのテキストに[`onchange`](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/change_event)イベントの記述があれば、それを参照してください。

> ②Developer toolのconsoleタグではなく、ウェブページに上に回答を表示させるにはどのような修正が必要でしょうか。

ウェブページ上に回答を表示させるコントロールを配置する必要があります。

例えば`<input type="number" id="answer" name="answer_number" />`というコントロールを配置して、  
javascriptで`document.getElementById("answer").value =
123;`と記述すればコントロールに`123`が表示されます。


CC BY-SA 4.0
2022-12-23T01:57:32.580
92971
2022-12-23T01:57:32.580
9820
92962
answer