Question 199059 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Printing all the numbers in html using a function that contains for loop and conditions statements

I’ve tried to solve the FizzBuzz problem using a function that contains a for loop and conditions statement and then to do references to my html document. The function calculates correct the value from the input, for example it shows 1 if it is 1, fizz if the number is 3 and so on. The issue is that it prints only the answer of the condition for that number and not all the numbers until the one that is introduced. If I type 18, it display only FizzBuzz and not all the numbers until it reaches 18 for example. I don’t understand what I miss or what is wrong and I still struggle with using the debugger to find out.

 <label for = "num">Enter a number: </label>
 <input type ="number" id ="num" name ="num">
 <button id = "btn">Play</button>
 <p id = "result"></p>

 <script>
  let btn = document.getElementById("btn");
  btn.addEventListener("click", fizzBuzz);

  function fizzBuzz() {
    let number = document.getElementById("num").value;
    for (let i=1; i<=number; i++) {
       let appendString = "";
       if (i%3 === 0) {
        appendString += "Fizz";
       }
       if (i%5 === 0) {
        appendString += "Buzz";
       }
       if (appendString === "") {
        document.getElementById("result").innerHTML = i;  
       } else {
        document.getElementById("result").innerHTML = appendString;
       }
     }
  }
    </script>
Tags:

2

Answers


  1. 0

    and welcome to StackExchange!

    Looking at your code, it looks like you are setting the innerHtml using = which will overwrite the contents with the new value. You will want to replace that with the += (append, so x += 1 is the same as x = x + 1)

     <label for = "num">Enter a number: </label>
 <input type ="number" id ="num" name ="num">
 <button id = "btn">Play</button>
 <p id = "result"></p>

 <script>
  let btn = document.getElementById("btn");
  btn.addEventListener("click", fizzBuzz);

  function fizzBuzz() {
    let number = document.getElementById("num").value;
    for (let i=1; i<=number; i++) {
       let appendString = "";
       if (i%3 === 0) {
        appendString += "Fizz";
       }
       if (i%5 === 0) {
        appendString += "Buzz";
       }
       // !! We changed these two from = to += !!
       if (appendString === "") {
        document.getElementById("result").innerHTML += i;
       } else {
        document.getElementById("result").innerHTML += appendString;
       }
     }
  }
    </script>

    There will be some additional things you can do to make it prettier, like clearing the innerHtml at the start (you can set to empty string "") and adding some seperator between the appended strings

    Login or Signup to reply.
  2. 0

    Instead of saying document.getElementById("result").innerHTML = i;, you should instead append it, like so:

    if (appendString === "") {
   document.getElementById("result").innerHTML += i;  
} else {
   document.getElementById("result").innerHTML += appendString;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search