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/