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/