Home>

javascript - if a non-integer value is entered in the form, i want to change to a specification that is not calculated

I want to change the specification so that calculation does not start as shown in the photo below when a non-integer value is entered in one or both of the forms.

I have investigated, but no matter how I am corrected, even if it is an integer value, even if I enter an integer value, the calculation starts and I am worried.

<! DOCTYPE html>
<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 p = document.getElementById ('p');
  const btn = document.getElementById ('btn');
    btn.addEventListener ('click', function () {

      document.body.removeChild (p);
      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 ''));
        }
    const result = document.getElementById ('result');
    result.innerHTML = "";
    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);
      } else if (number% fizzNum === 0) {
        const p = document.createElement ('p');
        p.textContent = ("Fizz" + "" + number);
        result.appendChild (p);
      } else if (number% buzzNum === 0) {
        const p = document.createElement ('p');
        p.textContent = ("Buzz" + "" + number);
        result.appendChild (p);
      }
  }
  });
}
  </script>
</body>
</html>
Code
javascript
  • Answer # 1

      

    Even if it corrects even if it is an integer value, even if an integer value is inserted, calculation starts and I am worried.

    A message is displayed after confirming the state of the price, but it will proceed as it isnot aborted.

  • Answer # 2 

    const result = document.getElementById ('result');
    result.innerHTML = "";
    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);
      } else if (number% fizzNum === 0) {
        const p = document.createElement ('p');
        p.textContent = ("Fizz" + "" + number);
        result.appendChild (p);
      } else if (number% buzzNum === 0) {
        const p = document.createElement ('p');
        p.textContent = ("Buzz" + "" + number);
        result.appendChild (p);
      }
  }

    should be inif (Number.isInteger (fizzNum)&&Number.isInteger (buzzNum))

Related articles