How to output JavaScript loop onto page (instead of in the console)?

Question

I am new to programming and am having a go at doing my own FizzBuzz challenge which is the following:

"Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”."

I am doing it in Javascript & jQuery and I can get it to print in the console but how do I modify it so that it prints it actually onto the page itself? Like maybe using HTML to help output a list/array or something so you can see what would be in the console, on the page, if I'm making sense?

At the moment I have got it working in the console by doing this:

for (var i=1; i < 101; i++){
    if (i % 15 == 0) console.log("FizzBuzz");
    else if (i % 3 == 0) console.log("Fizz");
    else if (i % 5 == 0) console.log("Buzz");
    else console.log(i);
}

and then I changed it to this:

<p id="fizzbuzz"></p>

for (var i=1; i < 101; i++){
    if (i % 15 == 0) {
      $('#fizzbuzz').html("FizzBuzz");
    }
    else if (i % 3 == 0) {
      $('#fizzbuzz').html("Fizz");
    }
    else if (i % 5 == 0) {
      $('#fizzbuzz').html("Buzz");
    }
    else console.log(i);
}

But this is obviously only printing out one line as it is replacing the text within the 'fizzbuzz' ID instead of creating a list of the loop outputs.

Can anyone help me, please? Sorry I'm a noob, I'm trying to learn.

Thanks.

Emma this could help: https://stackoverflow.com/questions/5677799/how-to-append-data-to-div-using-javascript instead of replacing all the html content each time, append it. — JakeofSpades, Apr 12 '19 at 14:51
Use `append` instead of `html` http://api.jquery.com/append/ — Hasta Tamang, Apr 12 '19 at 14:51

Fraction · Accepted Answer · 2019-04-12T14:57:11.420

Use .append() instead of .html() in order to inserts the specified content as the last child of the selected element

for (var i=1; i < 101; i++){
    if (i % 15 == 0) {
      $('#fizzbuzz').append("FizzBuzz<br/>");
    }
    else if (i % 3 == 0) {
      $('#fizzbuzz').append("Fizz<br/>");
    }
    else if (i % 5 == 0) {
      $('#fizzbuzz').append("Buzz<br/>");
    }
    else console.log(i);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fizzbuzz"></p>

score 1 · Answer 2 · answered Apr 12 '19 at 14:51

1

If using jQuery, try append(), it will add the content you need without replacing your current value.

Reference: http://api.jquery.com/append/

answered Apr 12 '19 at 14:51

ronnyfm

1,973
25
31

score 0 · Answer 3 · answered Apr 12 '19 at 14:53

Why not create a separate function to append text to your element. I personally don't like jQuery as it not really needed and bloats your page a lot, (personal opinion) so I will give you a vanilla example.

<p id="fizzbuzz"></p>

<script>
function appendTextToElement() {

}
for (var i=1; i < 101; i++){
    if (i % 15 == 0) {
      $('#fizzbuzz').html("FizzBuzz");
    }
    else if (i % 3 == 0) {
      $('#fizzbuzz').html("Fizz");
    }
    else if (i % 5 == 0) {
      $('#fizzbuzz').html("Buzz");
    }
    else console.log(i);
}
</script>

score 0 · Answer 4 · answered Apr 12 '19 at 14:53

Your issue here is that .html() will overwrite everything in the fizzbuzz paragraph instead of appending to it.

You can append to your paragraph by using .append() instead of .html().

for (var i = 1; i < 101; i++) {
  if (i % 15 == 0) {
    $('#fizzbuzz').append("FizzBuzz<br/>");
  } else if (i % 3 == 0) {
    $('#fizzbuzz').append("Fizz<br/>");
  } else if (i % 5 == 0) {
    $('#fizzbuzz').append("Buzz<br/>");
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fizzbuzz"></p>

Or, better yet, as DOM methods are considered expensive operations, it is usually better to minimize your usage of them. Appending to the DOM within your for loop is unnecessary. Thus, you could instead build a string of HTML and use .html to add your string:

var htmlStr = "";
for (var i = 1; i < 101; i++) {
  if (i % 15 == 0) {
    htmlStr += "FizzBuzz<br />";
  } else if (i % 3 == 0) {
    htmlStr += "Fizz<br />";
  } else if (i % 5 == 0) {
    htmlStr += "Buzz<br />";
  }
}

$("#fizzbuzz").html(htmlStr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fizzbuzz"></p>

score 0 · Answer 5 · answered Apr 12 '19 at 14:55

You could just append a textnode to the element. I would move the element outside of the loop since you only need to grab it once and then append to it multiple times, you could also create a document fragment, append to the fragment and then add the fragment to the element which would be the best option. Since this is a simple append operation you could access the element directly without creating a JQuery object which would be a bit quicker and work towards moving code away from JQuery.

var ele = document.getElementById('#fizzbuxx');
var frag = document.createDocumentFragment();

for (var i=1; i < 101; i++){
    if (i % 15 == 0) {
      frag.appendChild(document.createTextNode("FizzBuzz"));
    }
    else if (i % 3 == 0) {
      frag.appendChild(document.createTextNode("Fizz"));
    }
    else if (i % 5 == 0) {
      frag.appendChild(document.createTextNode("Buzz"));
    }
    else {
      console.log(i);
    }
}

ele.appendChild(frag);

How to output JavaScript loop onto page (instead of in the console)?

5 Answers5