问题描述:

This is the HTML:

<body>

<p>Below the input bubbles the numbers from 1 - 100 will be printed. Any number that is the multiple of the Fizz, will have Fizz instead of the number and the same goes for Buzz. Any number that is a multiple of both of the numbers is printed as FizzBuzz.</p>

<input type="text" id="fizz" name="fizz" placeholder="Enter the fizz number">

<input type="text" id="buzz" name="buzz" placeholder="Enter the buzz number">

<p id="fizzbuzz"></p>

</body>

This is the JavaScript. I think this is the problem but I am not 100% sure:

$(document).ready(function() {

var fizz = document.getElementById('fizz').value;

var buzz = document.getElementById('buzz').value;

var p = document.getElementById('fizzbuzz');

for (var i = 1; i < 101; i++) {

if (i % fizz === 0 && i % buzz === 0) {

p.innerHTML = p.innerHTML + i + "FizzBuzz, ";

} else if (i % fizz === 0) {

p.innerHTML = p.innerHTML + i + "Fizz, ";

} else if (i % buzz === 0) {

p.innerHTML = p.innerHTML + i + "Buzz, ";

} else {

p.innerHTML = p.innerHTML + i + ", ";

}

}

});

网友答案:

Your code seems to be using jQuery, but is not included jQuery.

If you don't have jQuery included, then instead of $(document).ready() use DOMContentLoaded.

You also will need a change event handler to update the result when the input values are changed

document.addEventListener("DOMContentLoaded", function(event) {

  var elfizz = document.getElementById('fizz');
  var elbuzz = document.getElementById('buzz');
  var p = document.getElementById('fizzbuzz');


  function changehandler() {
    var fizz = +elfizz.value || 1;
    var buzz = +elbuzz.value || 1;

    var html = '';
    for (var i = 1; i < 101; i++) {
      if (i % fizz === 0 && i % buzz === 0) {
        html += i + "FizzBuzz, ";
      } else if (i % fizz === 0) {
        html += i + "Fizz, ";
      } else if (i % buzz === 0) {
        html += i + "Buzz, ";
      } else {
        html += i + ", ";
      }
    }
    p.innerHTML = html;
  }

  elfizz.addEventListener('change', changehandler);
  elbuzz.addEventListener('change', changehandler);
  changehandler();
});
<p>Below the input bubbles the numbers from 1 - 100 will be printed. Any number that is the multiple of the Fizz, will have Fizz instead of the number and the same goes for Buzz. Any number that is a multiple of both of the numbers is printed as FizzBuzz.</p>
<input type="text" id="fizz" name="fizz" placeholder="Enter the fizz number">
<input type="text" id="buzz" name="buzz" placeholder="Enter the buzz number">
<p id="fizzbuzz"></p>
相关阅读:
Top