How to display the for loop in html

1

I am trying to loop over from 1 to the user input value. But it displays only the user value. Can someone suggest where I am leaving out.
Code so far

  <h1> Fizzbuzz Game </h1>
<form>
<label for="inputType"> Enter a number to start</label>
<input  id ="inputType" type = "number" value="1">
<button onclick="myFunction(event)"> Enter</button>
</form>
<p id="demo"> Result</p>
<script>
function myFunction(event) {
    event.preventDefault(); 
    let userInput = document.getElementById("inputType").value;
    let para = document.getElementById("demo");
for(let i=1; i<=userInput; i++){
 if(i% 3 === 0 &&  i%5 ===0) {
     para.innerHTML= "Fizzbuzz";
} else if (i% 5 === 0){
     para.innerHTML = "buzz";
} else if(i %3 === 0){
    para.innerHTML = "fizz";
} else{
    para.innerHTML = i;
}
}
} 
</script>
2

Hello~!

Each iteration of your loop reassigns the inner html of your para element. Using the = operator is overwriting the current content.

You might consider trying the += operator to concatenate the new value to the existing content. :slight_smile:

2 Likes
3

@nhcarrigan Thank you so much. It actually worked.

1 Like
4

Glad I could help~! Happy Coding! :purple_heart: