-1

I tried making an small fizzbuzz algorithm 

function fizzbuzz(num){

for (let i = 1; i <=  num; i++) {    

    if(i%3===0 && i%5===0){
        console.log("Fizzbuzz");
    }    
  else if (i%3===0) {
    console.log("fizz");
   }
   else if(i%5===0){
       console.log("buzz");
   }

else{
    console.log(i);
}
}

}

console.log(fizzbuzz(20));

It works fine using console.log but now I want to build something which takes the input from a textfield and displays the output of this algorithm on the webpage itself after clicking a button. I am new to the dom and I tried document.write() but It didn't seem to work.

Thanks.

siddhant
  • 69
  • 5
  • 1
    `I am new to the dom and I tried document.write() but It didn't seem to work.` Then post the code you've tried, the code you posted doesn't actually have anything to do with your problem since it's working – CertainPerformance May 04 '18 at 07:43
  • Yeah it is working in console.log() but I don't know how to correctly display on webpage, – siddhant May 04 '18 at 07:45
  • 1
    Post your HTML and the code you've tried. (The `fizzbuzz` function doesn't matter) – CertainPerformance May 04 '18 at 07:46
  • @user651436 You are trying to have a textfield and a button with some javascript behind. This can be easily found on internet (eg: *Bind javascript function to button* or *Javascript get input value*). Try this and then add your HTML/JS code in your question if you still have a problem – Weedoze May 04 '18 at 07:48

2 Answers2

0

fizzbuzz using HTML and Javascript

jQuery(document).ready(function($) {
  
  
  
  $("#go").click(function () { 
    var i = $("#myNumber").val(); 
    if (i == ''  || isNaN(i) ){ 
      $("#myAnswer").text("enter a number"); //throw this error
      return;
    } 
    var num = ''; //create a variable num
    num += (i % 3 === 0) ? 'Fizz' : ''; //if num is divisable by 3 say fizz & continue else continue
    num += (i % 5 === 0) ? 'Buzz' : ''; //if num is divisable by 5 say buzz & continue else continue
    num = (num === '') ? i : num; //if num is not divisable by 3 or 5 return the user input
    $("#myAnswer").text(num); //display results
  });
  
  
  
});
.container {
  background:#ccc;
  border: 1px solid #333;
  border-radius:5px;
  box-shadow: 2px 2px 10px #333;
  margin: 100px auto;
  padding:50px;
  text-align: center;
  width: 250px;
}

#myAnswer {
  color: #333;
  font-weight: bold;
  text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>FizzBuzz</title>
  </head>
  <body>
    <div class="container">
      <input type="text" placeholder="Enter a Number" id="myNumber" maxlength="3" />
      <input type="button" value="go!" id="go" />
      <p id="myAnswer"> </p>
    </div>
  </body> 
</html>
Sudarshan
  • 367
  • 2
  • 8
  • 20
0

"Getting your function to HTML" is actually pretty easy:

  • Simply create a input field, so the user can type a number
  • Create a button that fires your function when it gets clicked
  • Be sure to pass the inputs value as a parameter to your function
  • Adjust the functions output, so it gets displayed on the page

function fizzbuzz(num) {

  for (let i = 1; i <= num; i++) {

    if (i % 3 === 0 && i % 5 === 0) {
      document.getElementById('output').innerHTML += "fizzbuzz<br>";
    } else if (i % 3 === 0) {
      document.getElementById('output').innerHTML += "fizz<br>";
    } else if (i % 5 === 0) {
      document.getElementById('output').innerHTML += "buzz<br>";
    } else {
      document.getElementById('output').innerHTML += i + "<br>";
    }
  }
}
<input type="number" id="input"><input type="button" onclick="fizzbuzz(document.getElementById('input').value)" value="Go!">
<p id="output"></p>
CodeF0x
  • 2,624
  • 6
  • 17
  • 28