javascript - jQuery 事件处理程序不会在单击时激活

Question

我试图让我的 fizzbuzzz 解决方案在“单击”时运行并在容器中的代码标签之间显示，但当我单击 div 内部时没有打印任何内容，我不明白为什么。

对于我的功能，我有:

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

对于我的index.html View ，我有这个:

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

对于我的 jQuery 脚本，我有:

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

我做错了什么？我将非常感谢任何反馈:)

Answer 1

嗯，<code> 没有什么特殊含义。标签，并且您所做的任何事情都不会在其中放置代码。您可能正在寻找与此更接近的东西:

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

具有以下功能:

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