Home>

I am creating FizzBuzz using JavaScript.
The functions I want to add are as follows.
(1) Prepare one input tag for each of Fizz and Buzz, and display multiples of the input value in ascending order.
Example) Fizz: 2
Buzz: 4
Fizz: 4
Buzz: 8
(2) When it is a common multiple of Fizz and Buzz, it is displayed as FizzBuzz.
Example) Fizz: 2
FizzBuzz: 4
Fizz: 6
FizzBuzz: 8
(3) If the entered value is blank or a character string, an error message is displayed saying "Please enter an integer value" (even if one is a number and the other is a character string, the error message is displayed).

(1) Even if you enter a numerical value in one and a character string in the other without getting caught in the&&condition, the loop processing will ignite.
(2) Both are blank, and even if you enter a character string in both and press the execute button, the error text is not displayed.

Corresponding source code
<! 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 = Number (document.getElementById ("fizzNum"). value);
  const buzzNum = Number (document.getElementById ("buzzNum"). value);
  if (typeof fizzNum === "number"&&typeof buzzNum === "number") {
    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");
  }
});
What I tried

At first, I tried to convert the input value to number type with perseInt, but in that case, since the input value is also converted to number type even with a character string, I tried converting it using Number (). However, it did not behave as expected.

It works as expected for loop processing, but it doesn't behave as expected for if statements.

I've researched various things, but I'm sorry, so I would appreciate it if you could teach me.
I look forward to working with you.

Supplementary information (FW/tool version, etc.)

Editor used: VSCode

  • Answer # 1

    Hello.

    This is the cause.

    Number type isA double-precision floating-point number in IEEE 754 (a number between-(253 − 1) and 253-1). In addition to the representation of floating point numbers, three symbolic values ​​+ Infinity, -Infinity,There is NaN ("Not a Number").
    JavaScript data types and data structures-JavaScript | MDN
    typeof --JavaScript | MDN

  • Answer # 2

    If it cannot be converted by Number, it will be NaN, but in typeof, NaN will be judged as number.
    reference
    https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/typeof

    Also, although the input limit is set to an integer value, it seems that negative numbers and 0 are not suitable for thinking about what you want to do, so why not change the condition to a natural number?
    In that case

    if (typeof fizzNum === "number"&&typeof buzzNum === "number") {


    Judgment of

    if (fizzNum>0&&buzzNum>0) {


    I think you should change it to.