Home>

I want to use an if statement to display the "Please enter an integer value" error message when the entered value contains a decimal point.

Corresponding source code

* The part where the operation does not work is the else if part at the end of the JavaScript file.

<! DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
  <link rel = "stylesheet" href = "style.css">
  <title>FizzBuzz</title>
</head>
<body>
     FizzBuzz problem 
    FizzNum:<input type = "text" placeholder = "Please enter an integer value" value = "">
  <br>
    BuzzNum:<input type = "text" placeholder = "Please enter an integer value" value = "">
  <br>
  <button type = "button">execute</button>
     [Output] 
  <ul></ul>
  <script src = "main.js"></script>
</body>
</html>
const button = document.getElementById ("output");
const fizzbuzzList = document.getElementById ("fizzbuzzList");
const listAdd = (a) =>{
  const li = document.createElement ("li");
  li.innerHTML = a;
  fizzbuzzList.appendChild (li);
};
button.addEventListener ("click", () =>{
  const fizzNum = document.getElementById ("fizzNum"). value;
  const buzzNum = document.getElementById ("buzzNum"). value;
  if (fizzNum>0&&buzzNum>0) {
    for (i = 1;i<100;i ++) {
      if (i% fizzNum === 0&&i% buzzNum === 0) {
        listAdd ("FizzBuzz" + i);
      } else if (i% fizzNum === 0) {
        listAdd ("Fizz" + i);
      } else if (i% buzzNum === 0) {
        listAdd ("Buzz" + i);
      }
    }
  } else if (fizzNum == "" || buzzNum == "") {
    listAdd ("Please enter an integer value");
  } else if (typeof fizzNum === "string" || typeof buzzNum === "string") {
    listAdd ("Please enter an integer value");
  } else if (fizzNum<0 || buzzNum<0) {
    listAdd ("Please enter an integer value");
  }
});
What I tried
else if (fizzNum<0 || buzzNum<0) {
    listAdd ("Please enter an integer value");
  }

This part

else if (indexOf.fizzNum (".")! == -1 || indexOf.buzzNum (".")! == -1) {
    listAdd ("Please enter an integer value");
  }
else if (fizzNum.includes (".")! == -1 || buzzNum.includes (".")! == -1) {
    listAdd ("Please enter an integer value");
  }


I changed it to this one and tried it, but it didn't work and it didn't appear.
I am in a state of being overwhelmed, so I would appreciate it if you could teach me.

Postscript

I tried to rewrite it with reference to what you answered.

else if (Number.isInteger (fizzNum) == false || Number.isInteger (buzzNum) == false) {
listAdd ("Please enter an integer value");
}

I tried this, but nothing was displayed.

  • Answer # 1

    The position of if is also the same, but if the number obtained from the input element is as it is, it is a character string, so if you do not digitize it with Number () etc., you will not get the expected value with Number.isInteger ().

    button.addEventListener ("click", () =>{
      const fizzNum = Number (document.getElementById ("fizzNum"). value);
      const buzzNum = Number (document.getElementById ("buzzNum"). value);
      if (Number.isInteger (fizzNum)&&Number.isInteger (buzzNum)&&fizzNum>0&&buzzNum>0) {
        for (i = 1;i<100;i ++) {
          if (i% fizzNum === 0&&i% buzzNum === 0) {
            listAdd ("FizzBuzz" + i);
          } else if (i% fizzNum === 0) {
            listAdd ("Fizz" + i);
          } else if (i% buzzNum === 0) {
            listAdd ("Buzz" + i);
          }
        }
      } else {
        listAdd ("Please enter an integer value");
      }
    });


    If you use the input validation function,

       FizzBuzz problem 
        FizzNum:<input type = "number" min = "1" step = "1" required id = "fizzNum" placeholder = "Please enter an integer value" value = "">
      <br>
        BuzzNum:<input type = "number" min = "1" step = "1" required id = "buzzNum" placeholder = "Please enter an integer value" value = "">
      <br>
      <button type = "button" id = "output">execute</button>
         [Output] 
       
    button.addEventListener ("click", () =>{
      const fizz = document.getElementById ("fizzNum");
      const buzz = document.getElementById ("buzzNum");
      if (fizz.matches (': valid')&&buzz.matches (': valid')) {
        const fizzNum = Number (fizz.value);
        const buzzNum = Number (buzz.value);
        for (i = 1;i<100;i ++) {
          if (i% fizzNum === 0&&i% buzzNum === 0) {
            listAdd ("FizzBuzz" + i);
          } else if (i% fizzNum === 0) {
            listAdd ("Fizz" + i);
          } else if (i% buzzNum === 0) {
            listAdd ("Buzz" + i);
          }
        }
      } else {
        listAdd ("Please enter an integer value");
      }
    });


    As a benefit, you can style using the: valid,: invalid pseudo-class.

    input: invalid {
      background-color: #ffdddd;
    }
    input: valid {
      background-color: #ddffdd;
    }

Related articles