javascript - 乒乓又名 FizzBu​​zz 测试

标签 javascript html fizzbuzz

我是编程新手,目前被 Ping-Pong aka FizzBu​​zz 问题困扰。 (制作一个网页,提示用户输入一个数字,并显示不超过该数字的每个数字。但是,对于三的倍数,页面打印“ping”,对于五的倍数,页面打印“pong”,并且对于三和五 (15) 的倍数,页面打印“乒乓”。)

我已经查看了此处的其他解决方案(例如 this one ),它们有助于理解如何解决它。我希望我的 javascript 反射(reflect)了这一点。

我的问题是我无法尝试从我在网页上的表单中获取输入数字并通过 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();

};

});

同样,我是新手,所以如果有人能一步一步地分解它,我将不胜感激。谢谢。

最佳答案

这是不对的:

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

关于javascript - 乒乓又名 FizzBu​​zz 测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27844904/

相关文章:

javascript - 在不更改显示属性的情况下隐藏 CSS 元素

c# - MVC 3 : how to update checkboxlist when dropdownlistitem is selected?

c - 修改函数而不失去意义

ruby - 为什么这个 ruby​​ 使用\u001 为 1 以及如何更改?

c - 打印数字列表,用 3,5 的倍数以及 3and5 C 替换数字

javascript - JS根据条件过滤(如果存在)

javascript - jQuery 搜索表单 - 如何定向到内部页面

html - 带有 float :left 的导航标签

javascript - 谁能推荐一个优雅的 "No IE6 support"脚本?

html - JSF 更改自动生成的元元素以允许使用 ssl 下载文件