FizzBu​​zz 应用程序的 jQuery 按钮

Question

我正在使用 Rails 开发一个非常简单的 JavaScript FizzBu​​zz 应用程序，但我似乎无法让表单及其按钮正常工作。我知道这是非常粗糙的代码，其中一些代码是 HTML 和 JavaScript，而不是 Ruby，因为我对前两者比后者更熟悉。

这是我的表格:

<p>In this field, put the starting number. It must be a positive integer <50.</p>
<form name="FizzBuzz Form">
<input type="text" name="fizzBuzzStart"/>
</form>
<div class="button" id="start">Add!</div><br>
<p>In this field, put the ending number. It must be a positive integer >50.</p>
<form name="FizzBuzz Form">
<input type="text" name="fizzBuzzEnd"/>
</form>
<div class="button" id="end">Add!</div><br><br>
<div class="button" id="play">Let's play!</div><br>

这是我的 script.js 文件:

$("#start").click(function(){
  var start = $("input[name=fizzBuzzStart]").val();});
$("#end").click(function(){
  var end = $("input[name=fizzBuzzStart]").val();});
$("#play").click(function(){
    for (var i=start; i<=end; i++) {
        if (i%15===0){console.log("FizzBuzz");}
            else if (i%3===0){console.log("Fizz");}
            else if (i%5===0){console.log("Buzz");}
            else {console.log(i);} }});});

如有任何建议，我们将不胜感激!

Answer 1

主要问题是 start 和 end 被用作局部变量，因此一旦设置它们就会被有效地丢弃。将它们设置为全局并修复 #end 点击处理程序中的字段名称拼写错误。

var start, end;

$("#start").click(function () {
    start = $("input[name=fizzBuzzStart]").val();
});

$("#end").click(function () {
    end = $("input[name=fizzBuzzEnd]").val();
});

$("#play").click(function () {
    for (var i = start; i <= end; i++) {
        if (i % 15 === 0) {
            console.log("FizzBuzz");
        } else if (i % 3 === 0) {
            console.log("Fizz");
        } else if (i % 5 === 0) {
            console.log("Buzz");
        } else {
            console.log(i);
        }
    }
});

演示:http://jsfiddle.net/fJyRb/