CODEWITHSUNDEEP
javascripthtml
user5633497
user5633497

Reputation:

My JavaScript isn't generating HTML correctly

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

Upvotes: 0

Views: 34

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

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>

Upvotes: 1

Related Questions