使用 javascript 在网页上显示算法的输出

Question

我尝试制作一个小的 fizzbuzz 算法

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(嘶嘶声(20));

使用 console.log 它工作正常，但现在我想构建一些东西，它从文本字段中获取输入，并在单击按钮后在网页本身上显示该算法的输出。我是 dom 的新手，我尝试了 document.write() 但它似乎没有用。

谢谢。

Answer 1

fizzbuzz 使用 HTML 和 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>

Answer 2

"Getting your function to HTML"其实很简单：

只需创建一个输入字段，以便用户可以输入数字
创建一个按钮，当它被点击时触发您的函数
确保将输入值作为参数传递给您的函数
调整函数输出，使其显示在页面上

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>

使用 javascript 在网页上显示算法的输出

display output of an algorithm on webpage using javascript

javascript

algorithm

function

dom

control-flow