1

I need some help. My fizz-buzz code is correct but when my page loads it is not showing. Can someone help what I am missing?

Here is my html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FizzBuzz Challenge</title>

</head>
<body>
<h1>FizzBuzz Challenge</h1>
<p>View FizzBuzz Output</p>
<script type="text/javascript" src="js/FizzBuzz.js"></script

</body>
</html>

Here is my JavaScript code:

function FizzBuzz() {
    var display = numCount;

    if (numCount % 3 == 0) {
        display = ("Fizz");
    } else if (numCount % 5 == 0) {
        display = ("Buzz");
    } else if (numCount % 3 == 0 && numCount % 5 == 0) {
        display = ("FizzBuzz");

    } else {

        console.log(display);
    }
}

for (numCount = 1; numCount < 100; numCount++) {
    FizzBuzz(numCount);
}
cdlane
  • 40,441
  • 5
  • 32
  • 81
Riza
  • 25
  • 6
  • Open your browser's web tools and go to Console. There you will see the messages of your code. In JavaScript, calling `console.log(...)` does not print anything in the web page, only in the console. – Tasos K. Oct 31 '15 at 19:25
  • Your last `else if` is unreachable, if it would be true one of the preceding conditions would have also been true. Also, are you sure that you want the log to happen in the `else` condition instead of always? – Paul S. Oct 31 '15 at 19:26
  • I just saw, you've also not closed your script tag, it's missing a `>` – Paul S. Oct 31 '15 at 19:34
  • @PaulS. Surprisingly, it still works without the closing `>` . Tried with both Chrome and Firefox. But it's better to provide correct html anyway – Manos Nikolaidis Oct 31 '15 at 19:46

1 Answers1

0

I would recommend this JavaScript code :

(function executeThis() {

    function FizzBuzz(numCount) {
        if (numCount % 15 == 0) {
            document.write("FizzBuzz ");
        } else if (numCount % 3 == 0) {
            document.write("Fizz ");
        } else if (numCount % 5 == 0) {
            document.write("Buzz ");
        } else {
            document.write(numCount + ' ');
        }
    }

    for (var numCount = 1; numCount < 100; numCount++) {
        FizzBuzz(numCount);
    }
}());

Note that :

  1. If a number is divisible with both 3 and 5 it is divisible with 15
  2. document.write displays things in the page. You may also want to have a look at Angular or jQuery or another such library/framework.
  3. add a space or other delimiter after each string you print
  4. try to keep your variables like numCount local in each function instead of making them global
Manos Nikolaidis
  • 21,608
  • 12
  • 74
  • 82
  • Please note `document.write` will call `document.open` if the page has reached _DOMContentLoaded_, which will cause the document to be emptied. – Paul S. Oct 31 '15 at 19:53
  • Thanks Manos, this works and shorter code too! what does the "+" sign do in this line? else { document.write(numCount + ' '); – Riza Oct 31 '15 at 20:16
  • @Paul Correct. And the output would look ugly anyway. My first recommendation for displaying would be Angular, jquery or another such framework/library – Manos Nikolaidis Oct 31 '15 at 20:18
  • This `numCount + ' '` converts `numCount` to a string and appends a space. Such type conversions are very concise in JavaScript but can also lead to nasty surprises. – Manos Nikolaidis Oct 31 '15 at 20:25
  • thanks. Also why did you put this at the end of the code "( ) )" instead of this " } ; " ? – Riza Oct 31 '15 at 21:20
  • 1
    To make the executeThis function "self executing". executeThis serves to create a scope and avoid global variables. executeThis could be anonymous. – Manos Nikolaidis Oct 31 '15 at 21:36