CODEWITHSUNDEEP
javascriptjquery
Jason Rodriguez
Jason Rodriguez

Reputation: 153

jQuery event handler wont activate on click

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 :)

Upvotes: 0

Views: 84

Answers (4)

Christian Ternus
Christian Ternus

Reputation: 8492

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

Upvotes: 1

realtek
realtek

Reputation: 841

If that fails you could try:

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

Upvotes: 0

user2672373
user2672373

Reputation:

Or you can try 

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

Upvotes: 0

Jared Gotte
Jared Gotte

Reputation: 472

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

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

Upvotes: 1

Related Questions