JavaScript function not being called from button

Question

I am trying to code the infamous FizzBuzz program in multiple languages and I am stumped on JavaScript. I am trying to call the function from a button but it doesn't work, and even when I try to call the function normally the same happens. I've tried multiple different methods of outputting and it made no difference so hopefully someone can show me what im doing wrong. Here's the code:

<!DOCTYPE html>
<html>
    <body>

        <div class="center">
            <h1>This is FizzBuzz</h1>
            <button onclick="fizzBuzz()">Run FizzBuzz</button> 
            <p id="hi">Hi there</p>
        </div>

        <style>
            .center {
                text-align: center;
                font-family:Arial;
            }
        </style>

        <script> //JavaScript
            var idd = document.getElementById("hi");
            function fizzBuzz(){
                idd.innerHTML = "hi";
                for (x = 0; x = 15; x++) {
                    idd.innerHTML = x;
                    if (x % 3 == 0 && x % 5 == 0){
                        idd.innerHTML = "FizzBuzz";
                    } else if((x % 3)= 0){
                        idd.innerHTML = "Fizz";
                    } else if((x % 5) = 0){
                        idd.innerHTML = "Buzz";
                    } else {
                        idd.innerHTML = x;
                    }
                }
            }
            fizzBuzz();
        </script>
    </body>

</html>

`else if((x % 3)= 0)` is a syntax error. Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Use tools like [JSHint](http://jshint.com/) to find problems with your code immediately. Read the documentation: see [What does this symbol mean in JavaScript?](https://stackoverflow.com/q/9549780/4642212) and the documentation on MDN about [expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators). — Sebastian Simon, Jul 07 '18 at 15:03
What are the symptoms of “doesn’t work”? Is the output unexpected, does nothing happen, is there an error in the console, …? Note that assigning to `innerHTML` will overwrite whatever was already in there. — Ry-, Jul 07 '18 at 15:03
`=` is for assignment, `===` or `==` (use `===`) are for comparison — Pointy, Jul 07 '18 at 15:06
This post — [The 3 different equals](https://stackoverflow.com/q/2063480/4642212) — is for PHP, but it largely applies for JavaScript as well. — Sebastian Simon, Jul 07 '18 at 15:08

score 2 · Answer 1 · answered Jul 07 '18 at 15:17

x = 15 will never evaluate to false, meaning the loop will go on forever. Try changing it to x < 15.

function fizzBuzz(){
                idd.innerHTML = "hi";
                for (x = 0; x < 15; x++) {
                    idd.innerHTML = x;
                    if (x % 3 == 0 && x % 5 == 0){
                        idd.innerHTML = "FizzBuzz";
                    } else if((x % 3) == 0){
                        idd.innerHTML = "Fizz";
                    } else if((x % 5) == 0){
                        idd.innerHTML = "Buzz";
                    } else {
                        idd.innerHTML = x;
                    }
                }
            }

You will also need to use == instead of = for comparisons for it to work, as in (x % 3) == 0.

score 0 · Answer 2 · answered Jul 07 '18 at 15:18

<!DOCTYPE html>
<html>
    <body>

        <div class="center">
            <h1>This is FizzBuzz</h1>
            <button onclick="fizzBuzz()">Run FizzBuzz</button> 
            <p id="hi">Hi there</p>
        </div>

        <style>
            .center {
                text-align: center;
                font-family:Arial;
            }
        </style>

        <script> //JavaScript
            var idd = document.getElementById("hi");
            function fizzBuzz(){
                idd.innerHTML = "hi";
                for (x = 0; x < 15; x++) {
                    idd.innerHTML = x;
                    if (x % 3 == 0 && x % 5 == 0){
                        idd.innerHTML = "FizzBuzz";
                    } else if((x % 3)== 0){<!--here '=='-->
                        idd.innerHTML = "Fizz";
                    } else if((x % 5) == 0){<!--here '=='-->
                        idd.innerHTML = "Buzz";
                    } else {
                        idd.innerHTML = x;
                    }
                }
            }
            fizzBuzz();
        </script>
    </body>

</html>

JavaScript function not being called from button

2 Answers2