Home>

[Current status]
① Put a number in the form and press the execution button →
② After that, enter a new number and press the execute button again.
③ The display is not switched and calculation is not possible (it cannot be calculated unless it is updated once)

[Goal]
① Put a number in the form and press the execution button →
② After that, enter a new number and press the execute button again.
③The screen changes and you can calculate the number (you can calculate without updating)

link content

I just googled what code I should use to do the action "switch the display when fizzbuzz is run once and then run again" but I can't find it.
I tried various things such as "Calculation Overwrite Javascript", "Screen Switch Javascript", "Execution Switch javascript", but it did not hit.

I felt that the features that appear in the dot install discount app are similar to this case ("switch fizzbuzz after switching fizzbuzz once and then again").
https://dotinstall.com/lessons/go_dutch_js_v2/33906
http://samples.dotinstall.com/s/go_dutch_js_v2/33906/
I thought it was "innerHTML", but it feels like another case.

<html lang = "en">
<head>
  <meta charset = "utf-8">
  <title>FizzBuzz issue</title>
</head>
<body>
    <p>
      FizzNum:<input type = "text" value = "" placeholder = "Please enter an integer value">
    </p>
    <p>
      BuzzNum:<input type = "text" value = "" placeholder = "Please enter an integer value">
    </p>
    <button>Execute</button>
  <p>[Output]</p>
  <p>Please enter an integer value</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 ('Error message' Please enter an integer value ''));
      }
        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>
Code
  • Answer # 1

    Thank you for your response.

    FizzNum:

    BuzzNum:

    Output

    Please enter an integer value

    '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 ('Error message' Please enter an integer value ''));
          }
          var result = document.getElementById ('result');// Add
          result.innerHTML = "";// Add
            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);
                result.appendChild (p);// Fix
              } else if (number% fizzNum === 0) {
                const p = document.createElement ('p');
                p.textContent = ("Fizz" + "" + number);
                result.appendChild (p);// Fix
              } else if (number% buzzNum === 0) {
                const p = document.createElement ('p');
                p.textContent = ("Buzz" + "" + number);
                result.appendChild (p);// Fix
              }
            }
          });
      }

    Sample

    Is it like this?

  • Answer # 2

    document.body.appendChild (p);should be output `` inside a specific element ''

    Start by deleting "within a specific element" when pressing "Run again"

Related articles