отображать вывод алгоритма на веб-странице с использованием JavaScript - PullRequest
Новая
       6

отображать вывод алгоритма на веб-странице с использованием JavaScript

0 голосов
/ 04 мая 2018

Я попытался сделать небольшой алгоритм 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 (FizzBuzz (20));

Работает нормально, используя console.log, но теперь я хочу создать что-то, что берет ввод из текстового поля и отображает вывод этого алгоритма на самой веб-странице после нажатия кнопки. Я новичок в дом, и я попробовал document.write (), но это не похоже на работу.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 04 мая 2018

«Перевод вашей функции в 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>
0 голосов
/ 04 мая 2018

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...