My JavaScript isn't generating HTML correctly

Question

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 + ", ";
        }
    }
});

you are using document.ready, but seems like there is no jQuery library included — Arun P Johny
– Arun P Johny, Commented Feb 18, 2016 at 3:10
Not as far as I know... without any external library... you can have DOMContentLoaded handler — Arun P Johny
– Arun P Johny, Commented Feb 18, 2016 at 3:15

Arun P Johny · Accepted Answer · 2016-02-18 03:27:07Z

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>

Collectives™ on Stack Overflow

My JavaScript isn't generating HTML correctly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related