jQuery event handler wont activate on click

Question

I am trying to get my fizzbuzzz solution to run on "click" and display inbetween code tags in a container but nothing is printing out when I click inside the div and I can't figure out why.

For my function I have :

function fizzbuzz(){
    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);
            }
        }
    }

for my index.html view I have this :

  <div id="results" class="container text-center">
    <p>Click to view the results of the function we just wrote: </p>
    <code></code>
  </div>

and for my jQuery script I have :

$("#results").click(function() {
  fizzbuzz();
});

What am I doing wrong? I will greatly appreciate any feedback :)

Christian Ternus · Accepted Answer · 2013-10-31 23:48:09Z

1

Hmm, there's no special meaning for <code> tags, and nothing you're doing would put code in there. What you're likely looking for is something closer to this:

<div id="results" class="container text-center">
    <p>Click to view the results of the function we just wrote: </p>
    <span id="fizzbuzz"></span>
</div>

with the function:

$(document).ready(function() {
function fizzbuzz(){
    elt = $('#fizzbuzz'); // find the element
    elt.empty(); // clear out anything that's there already
    for (var i = 1; i < 101; i++){
        if ((i % 15) === 0) {
            elt.append('FizzBuzz'); // append text
            } else if ((i % 3) === 0){
            elt.append('Fizz');
            } else if ((i % 5) === 0){
            elt.append('Buzz');
            } else {
            elt.append(i);
            }
        elt.append(" "); // add a space
        }
    }

$("#results").click(function() { // use .click(... or .on('click'..., not .onClick
  fizzbuzz();
});
});

edited Oct 31, 2013 at 23:48

answered Oct 31, 2013 at 23:38

Christian Ternus

8,48227 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Rodriguez Over a year ago

Wow, I didn't even know you could place a function in a span like that! Brilliant! Thanks I definitely learned something new today :)

Jared Gotte · Accepted Answer · 2013-10-31 23:34:20Z

1

.onClick is wrong. Use .click instead: (http://api.jquery.com/click/)

$("#results").click(function() {
  fizzbuzz();
});

answered Oct 31, 2013 at 23:34

Jared Gotte

4721 gold badge3 silver badges13 bronze badges

2 Comments

Jason Rodriguez Over a year ago

Thanks for the assist! I tried this and it did not work. Is there an issue with the html perhaps? I never tried to use jQuery on a div before. I just did it with a submit button in the past.

Jared Gotte Over a year ago

Refer to @Christian's response for a more complete answer.

user2672373 · Accepted Answer · 2013-10-31 23:36:56Z

0

Or you can try

$("#results").on('click', function() {
    fizzbuzz();
});

answered Oct 31, 2013 at 23:36

user2672373

1 Comment

Jason Rodriguez Over a year ago

Thanks for the assist! I tried this and it did not work. Is there an issue with the html perhaps? I never tried to use jQuery on a div before. I just did it with a submit button in the past.

realtek · Accepted Answer · 2013-10-31 23:42:21Z

0

If that fails you could try:

$("#results").bind('click', function() {
    fizzbuzz();
});

answered Oct 31, 2013 at 23:42

realtek

8414 gold badges19 silver badges39 bronze badges

Collectives™ on Stack Overflow

jQuery event handler wont activate on click

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related