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/