fizzbuzzを一度実行した後、再度実行した際、表示が切り替わらない

【現在の状況】
①フォームに数字を入れて実行ボタンを押す→
②その後、続けて、新しく数字を入力し再度実行ボタンを押す→
③表示が切り替わらず、計算ができない（一度更新しないと計算できない）

【目標】
①フォームに数字を入れて実行ボタンを押す→
②その後、続けて、新しく数字を入力し再度実行ボタンを押す→
③画面が切り替わり、数字を計算できる（更新せずとも、計算ができる）

ただ、「fizzbuzzを一度実行した後、再度実行した際に表示を切り替える」動作をするためにどういうコードを使うべきか、ググってみたのですが見つかりません。
「計算　上書き Javascript」「画面　切り替え　Javascript」「実行　切り替え　javascript」など色々ググってみたのですが、ヒットせず。

今回の事例（「fizzbuzzを一度実行した後、再度実行した際に表示を切り替える」）とドットインストールの割勘アプリに出てくる機能が似ていると感じました。
https://dotinstall.com/lessons/go_dutch_js_v2/33906
http://samples.dotinstall.com/s/go_dutch_js_v2/33906/
「innerHTML」かなと思ったのですが、別の事例のようにも感じます。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>FizzBuzz問題</title>
</head>
<body>
    <p>
      FizzNum: <input type="text" id="fizzInput" value=""  placeholder ="整数値を入力してください">
    </p>  
    <p>
      BuzzNum:<input type="text" id="buzzInput"  value="" placeholder ="整数値を入力してください">
    </p>
    <button id="btn">実行</button>
    
  <p>【出力】</p>
  <p>整数値を入力してください</p>

  <script>
  'use strict';
  {
  const fizzForm = document.getElementById ('fizzInput');
  const buzzForm = document.getElementById ('buzzInput');
  const btn = document.getElementById('btn');
    btn.addEventListener('click', function() {

      const fizzNum = parseFloat(fizzForm.value);
      const buzzNum = parseFloat(buzzForm.value); 

      if (Number.isInteger(fizzNum) && Number.isInteger(buzzNum))
      {
      
      } else {
        console.log(alert('エラーメッセージ「整数値を入力してください」'));
      }
      
        for (let number = 1; number <= 100; number++) {

          console.log(Number.isInteger(fizzNum));
          console.log(Number.isInteger(buzzNum));

          if(number % fizzNum === 0 && number % buzzNum === 0) {
            const p = document.createElement('p');
            p.textContent = ("FizzBuzz" + " "+ number);
            document.body.appendChild(p);

          } else if(number % fizzNum === 0) {
            const p = document.createElement('p');
            p.textContent = ("Fizz" + " " + number);
            document.body.appendChild(p);

          } else if(number % buzzNum  ===  0) {
            const p = document.createElement('p');
            p.textContent = ("Buzz" + " " + number);
            document.body.appendChild(p);
          }
        }
      
      
      });
  }


  </script>
</body>
</html>
コード

m.ts10806

2019/11/19 14:28

URLはマークダウンのリンク機能を利用してご提示ください。

kei344

2019/11/19 14:33

「切り替える」とは何でしょう。具体的に何をどうするかを質問文に追記してください。

行動規範の内容に同意します

回答2件

ベストアンサー

回答依頼ありがとうございます。

HTML
1
2<p>FizzNum: <input type="text" id="fizzInput" value=""  placeholder ="整数値を入力してください"></p>  
3<p>BuzzNum:<input type="text" id="buzzInput"  value="" placeholder ="整数値を入力してください"></p>
4<button id="btn">実行</button>
5<p>出力</p>
6<p>整数値を入力してください</p>
7<div id=result></div> <!-- 追加 -->
8

JS
1
2'use strict';
3  {
4  const fizzForm = document.getElementById ('fizzInput');
5  const buzzForm = document.getElementById ('buzzInput');
6  const btn = document.getElementById('btn');
7    btn.addEventListener('click', function() {
8
9      const fizzNum = parseFloat(fizzForm.value);
10      const buzzNum = parseFloat(buzzForm.value); 
11
12      if (Number.isInteger(fizzNum) && Number.isInteger(buzzNum))
13      {
14
15      } else {
16        console.log(alert('エラーメッセージ「整数値を入力してください」'));
17      }
18      var result = document.getElementById('result'); //追加
19      result.innerHTML = ""; //追加
20        for (let number = 1; number <= 100; number++) {
21
22          console.log(Number.isInteger(fizzNum));
23          console.log(Number.isInteger(buzzNum));
24
25          if(number % fizzNum === 0 && number % buzzNum === 0) {
26            const p = document.createElement('p');
27            p.textContent = ("FizzBuzz" + " "+ number);
28            result.appendChild(p); //修正
29
30          } else if(number % fizzNum === 0) {
31            const p = document.createElement('p');
32            p.textContent = ("Fizz" + " " + number);
33            result.appendChild(p); //修正
34
35          } else if(number % buzzNum  ===  0) {
36            const p = document.createElement('p');
37            p.textContent = ("Buzz" + " " + number);
38            result.appendChild(p); //修正
39          }
40        }
41
42
43      });
44  }
45