jQuery breaking my fizzbuzz, why?

Question

Trying to solve the fizzbuzz problem in javascript with a little html. I want to put the answers in a <ul> and display them on the page. To do this, I need to take the fizz-buzz's and somehow add them in a <li> element to the UL, with a prepend or append in jQuery. My code runs fine, until I add jQuery to the equation to prepend the <li>s into the html. I currently have the numbers/fizz-buzzes popping up with alerts.

I have tried putting in $(document).ready(function() {}, wrapping all javascript inside brackets. If I do, it breaks, even if there is 0 jQuery actually in the javascript section. Simply breaks, as if the page is never actually ready and thus the javascript will never run.

Assuming I can get any jQuery in to work, can I simply put jQuery statemments inside of my elseif statements? example:

else if (n1 % 5 === 0) {
        $("ul").prepend("<li>n1</li>")
    }

Javascript:

var number = prompt("number?");
var num_int = parseInt(number);

 var smack = new Array(num_int);

//populating array with numbers 1 through num_int
for (i = 0; i < smack.length; i++) {
    smack[i] = i+1;                         
              } //test again still working?

smack.forEach(function(n1) { //going through each array element, checking for fizz/buzz

    if (n1 % 3 === 0 && n1 % 5 === 0) {
        alert("fizz-buzz")

    }
    else if (n1 % 3 === 0) {
        alert("fizz")

    }
    else if (n1 % 5 === 0) {
        alert("buzz")
    }
    else {
        alert(n1)
    }


}); //end of forEach

HTML:

<hmtl>
<head>
<script src="scripts.js"></script>
<script src="jquery-1.11.2.js"></script>
</head>

<body>
<p>
<h1>Fizzbuzz</h1>
<ul id="hard">
<li>test</li>
</ul>
</p>


</body>

</html>

JSFiddle

Thanks in advance for any help! I'm sure this is a ridiculously easy question for anyone who has experience. I'm just getting into it, and while the math/logic section of fizzbuzz was pretty straightforward, getting it to display correctly is killing me.

If your fizzbuzz logic is in the scripts.js file, you would need to load that after the jquery script. Otherwise jquery will be undefined when you try to reference it. — Geoff Warren, Feb 12 '15 at 06:39

score 0 · Answer 1 · answered Feb 12 '15 at 06:40

0

You should load jquery before your script.js

Here's a demo

I added $('#hard').append

answered Feb 12 '15 at 06:40

slashsharp

2,823
2
19
26

score 0 · Answer 2 · answered Feb 12 '15 at 06:56

Changing the JQuery part to:

var number = prompt("number?");
var num_int = parseInt(number);

var smack = new Array(num_int);

//populating array with numbers 1 through num_int
for (i = 0; i < smack.length; i++) {
    smack[i] = i+1;                         
              } //test again still working?

smack.forEach(function(n1) { //going through each array element, checking for fizz/buzz

    if (n1 % 3 === 0 && n1 % 5 === 0) {
        $('#hard').append("<li>fizz-buzz</li>");

    }
    else if (n1 % 3 === 0) {
       $('#hard').append("<li>fizz</li>");

    }
    else if (n1 % 5 === 0) {
        $('#hard').append("<li>buzz</li>");
    }
    else {
        $('#hard').append("<li>"+n1+"</li>");
    }


}); //end of forEach

would help.

The changes here is inside the if conditions. You append your li to the ul each time and you will have your answers in the list.

Hope this helped.

jQuery breaking my fizzbuzz, why?

2 Answers2