1

Beginner here, so I might not be using the correct terms to describe this. I have a for Loop, else if statement that produces the result via console.log.

What I want to do is have those results (basic fizzbuzz problem) display on an HTML page. I have been reading high and low, and getting a little discouraged that I can't figure this out on my own. My guess is it should be something with .append but I don't know if that's right, or what the event(?) should even be. (e.g.; .click, .hover, etc.)

Let me know if you need any more info. My head is jumbled from all the code I've gone through. Any help would be greatly appreciated!

Here is my js code:

var choice = prompt("What number should we count up to?");

for (var i = 1; i <= choice; 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 html:

<!DOCTYPE html>
<html>
   <head>

    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all'>
    <script src="js/jquery-1.11.1.js"></script>        
    <script src="js/fizzBuzz.js"></script>

    <title>FizzBuzz!</title>  
  </head>    
  <body>

  <ol id="log">

  </ol>


</body>
</html>

The tag is a placeholder of sorts right now...

dustin
  • 23
  • 4

2 Answers2

0

Console.log writes to the javascript console, ie hit F12 on your browser (see image below)

Your code appears to work, in that it successfully writes to the Console.

To output in the browser window, one method would be to use JQuery as in this answer Inserting HTML into a div

enter image description here

Community
  • 1
  • 1
Paul Rowland
  • 8,244
  • 12
  • 55
  • 76
  • Thanks for the quick answer! You are correct, I have the js down, but on the html page itself, I want those results to show up just like it does in the console. Does that make sense? I'm thinking it should be something with jquery? – dustin May 30 '14 at 01:54
  • updated answer with link to JQuery method – Paul Rowland May 30 '14 at 01:55
  • great, thanks. A couple questions on that: 1. the answer mentions 'yourtHTML' - what would go in there exactly? (my output from the console.log? i.e.; "buzz"?) (Not sure what tHTML is? typo?). 2. And should the jQuery be placed above/below the javascript for Loop? – dustin May 30 '14 at 03:45
  • theres good examples on the jquery api site - e.g. http://api.jquery.com/append/ . The "hash" is an id selector, the "dot" is a class selector, so in your case to select the id of your list element it would be $("#log") – Paul Rowland May 30 '14 at 04:50
0

Try this:
The += operator used for adding into the end of a string/text.
The .innerHTML property referrers to the text inside HTML tag.

var log = document.getElementById('log');
for (var i = 1; i <= choice; i++) {
    if (i % 15 === 0) {
        log.innerHTML += 'FizzBuzz';
    } else if (i % 3 === 0) {
        log.innerHTML += 'Fizz';
    } else if (i % 5 === 0) {
        log.innerHTML += 'Buzz';
    } else {
        log.innerHTML += i;
    }

  }

I suggest you to use some separator, like:

log.innerHTML += ',Buzz';
// OR:
log.innerHTML += 'Buzz<br/>';
Dani-Br
  • 2,289
  • 5
  • 25
  • 32
  • `+=` on `.innerHTML` is not very efficient as the browser has to reparse and recreate all HTML objects in the `.innerHTML` every time you change it. It also wipes out any event handlers on the existing HTML objects in that stream. – jfriend00 May 30 '14 at 02:03
  • Dani-Br on your example, where does the prompt for choice fit in? – dustin May 30 '14 at 03:56
  • @jfriend00 is right. Use `insertAdjacentHTML` per [this benchmark comparison](https://stackoverflow.com/a/51140250/5389585), and because that's what it's designed for. – sondra.kinsey Jul 08 '19 at 17:17