乒乓球又名 FizzBuzz 测试答案

【问题标题】：Ping-Pong aka FizzBuzz test乒乓球又名 FizzBuzz 测试
【发布时间】：2015-01-08 16:27:49
【问题描述】：

我是编程新手，目前卡在 Ping-Pong aka FizzBuzz 问题上。（制作一个网页，提示用户输入一个数字并显示直到该数字的每个数字。但是，对于三的倍数，页面打印“ping”，对于五的倍数，页面打印“pong”，并且对于三和五 (15) 的倍数，页面将打印“乒乓球”。）

我在这里查看了其他解决方案（例如this one），它们对理解如何解决它很有帮助。我希望我的 javascript 反映了这一点。

我的问题是我被困在试图从网页上的表单中获取输入数字并通过 javascript 运行它，如果这有意义的话。

我很确定我的 javascript 的一部分只是将我拥有的所有东西都扔给它的集合体，这不是最好的。任何人都可以检查我的代码，看看我在这里做错了什么吗？

这是我的 HTML：

<!DOCTYPE html>
<html>
  <head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-1.11.2.js"></script>
    <script src="js/scripts.js"></script>

    <title>Ping-Pong Test</title>
  </head>

  <body>
    <div class="container">
      <h1>Ping Pong Test</h1>
      <p>Let's play the Ping-Pong game. The Ping-Pong game is a simple test that involves loops, conditionals, and variables. Enter your number below to start</p>

      <form id="start-form">
        <label for="input-number">Your number:</label>
        <input id="input-number" type="number">

        <button type="submit" class="btn">Calculate</button>
      </form>

      <div id="end-number">
        <ul id="results"></ul>
      </div>
    </div>
  </body>
</html>

还有我的javascript：

$(document).ready(function () { 
$("#start-form").submit(function(event) {
    var a = document.getElementById("#input-number");
    var num = a.elements[0].value;
    var listItems = "";
    var i;
    for (var i = 1; i <= num; i++) {
    if (i % 15 === 0) {
        console.log("Ping-Pong");
    }
    else if (i % 3 === 0) {
        console.log("Ping");
    }
     else if (i % 5 === 0) {
        console.log("Pong");
    }
    else{
    console.log(i);
    };

event.preventDefault();

};

});

再说一次，我是新人，所以如果有人能一步一步地分解它，我真的很感激。谢谢。

【问题讨论】：

从.getElementById('input-number')中删除#；
另外我很确定a 是一个元素，他不需要.elements[0] 位。
下次请创建一个code pen或者js fiddle。我为你创建了一个并修复了它。你有两个小问题（这里已经提到过）：codepen.io/mnpenner/pen/QwdvLM?editors=101

标签： javascript html fizzbuzz

【解决方案1】：

不对：

var a = document.getElementById("#input-number");

必须是以下行之一：

var a = document.getElementById("input-number");
// Or
var a = $("#input-number").get(0);
// Or
var a = $("#input-number")[0];

但这并不能解决您的问题。深入研究您的代码。我猜你需要有一个表单然后获取第一个元素：

 var a = document.getElementById("start-form");
 var num = a.elements[0].value;

但您可以进一步简化。为什么不这样做：

 // remove the a variable
 var num = $("#input-number").val(); // get the input-number value

【讨论】：

或 $("#input-number")[0] 以确保完整性。
好的，我更新了它，但它仍然无法正常工作。有什么想法吗？谢谢。
@KyleChase 您应该将更新后的代码放入 jsfiddle 或代码笔中。

【解决方案2】：

根据您的代码，我认为您只需要清理一些语法，以便 jquery 使用表单中的值。
我拿走了你的代码，为了清楚起见，把它删掉了，然后把它弄出来了。这是链接：

http://jsfiddle.net/zwa5s3ao/3/

$(document).ready(function(){
  $("form").submit(function(event){
    var num = $('#input-number').val()

    for (var i = 1; i <= num; i++) {
      if (i % 15 === 0) {
        $('#list').append('<li>'+"Ping-Pong"+'</li>');}
      else if (i % 3 === 0) {
        $('#list').append('<li>'+"Ping"+'</li>');}
      else if (i % 5 === 0) {
        $('#list').append('<li>'+"Pong"+'</li>');}
      else{
        $('#list').append('<li>'+i+'</li>');}

    };

  event.preventDefault();
  
  });
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Ping-Pong Test</title>

<body>
    
  <form>
    Your number: 
    <input type="number" name="input-number" id="input-number">
    <input type="submit" value="Calculate">
  </form> 

  <ul id="list"></ul>
</body>

希望这会有所帮助！

【讨论】：