0

初心者向けの、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>
3
  • 「初心者向けの、HTMLとJavascriptの練習問題を解いています。」とのことですが、質問の問題文は練習問題そのままでしょうか?<私の回答>にHTML要素を追加するのはOKでしょうか?
    – merino
    Commented 2022年12月22日 11:51
  • 参照している練習問題の出典 (URL や書籍名) を質問中に追記してみてください。
    – cubick
    Commented 2022年12月22日 12:53
  • <私の回答>は自由に修正していただいて構いません。
    – user54722
    Commented 2022年12月22日 15:11

2 件の回答 2

2

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

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

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

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

お手持ちのテキストにonchangeイベントの記述があれば、それを参照してください。

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

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

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

1
  • payanecoさん、大変勉強になりました。ありがとうございました。
    – user54722
    Commented 2022年12月26日 18:34
1
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>HTML</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <form>
    <label for="first">The first number:</label>
    <input type="number" id="first" name="first_number" /><br>    

    <label for="second">The second number:</label>
    <input type="number" id="second" name="second_number" /><br>
    
    <label for="third">The third number  :</label>
    <input type="number" id="third" name="third_number" />
  </form>      
  <div id="text"></div>
  <script>
    let first = document.getElementById("first");
    let second = document.getElementById("second")
    let third = document.getElementById("third");
    third.addEventListener('change', function() {
      let ans = Number(first.value) * Number(second.value) * Number(third.value);
      let text = document.getElementById("text");
      text.textContent = "The anser is: " + ans;
    }, false)
  </script>   
</body>
</html>

こんな感じでどうですか?

1
  • 質問や回答に興味を持った第三者(すぐには実行環境用意できない方)が, 結果を簡易に確認する方法として「JavaScript/HTML/CSS スニペット」があります。回答時にその機能選ぶだけなので(興味あれば)活用してみてください
    – oriri
    Commented 1月8日 2:05

この質問に回答するには、ログインする必要があります。