Javascript - 簡單計數

Question

這是我的第一篇文章，第二天使用Javascript;）。我嘗試創建一個簡單的表單，其中：

1. 允許用戶在輸入字段中放置任何字母/字母。
2. 比我想將它發送到我的腳本和：
   一）檢查如果有什麼是在一個形式
   B中給出）如果用戶把任何跡象我希望把它在一個數組和計數的數量試圖
   C）如果嘗試次數達到10我想停止腳本

我的腳本不會不記得嘗試次數。此外，它將數據保存在一個數組中，但在腳本完成後它將擦除所有內容（我在腳本中放置了一些console.log（），以查看它是否執行了任何操作）。它看起來像我的變量數不記得的嘗試:(數量

如何解決呢？ - 但在編碼的一種簡單的方法:)（我不想做了很大的變化在我的代碼）

<script type= "text/javascript"> 

var given_letters = []; // create an empty array 

function givenLetter() { 
    var count = 0; 
    var max_count = 10; 
    var letter = document.getElementById('letter').value; 

    while (count < max_count) { 
     if (letter === "") { 
      alert("No letter given");   
      return false; 
     } else {    
      count++; 
      given_letters.unshift(letter); 
      console.log(letter); // returns letter 
      console.log(given_letters); // returns array with 1 element 
      console.log(count); // returns "1" 
      alert("OK"); 
      return true; 
     } 
    } 
    while (count === max_count) { 
     alert("Sorry. You exceeded the limit of tries."); 
     return false; 
    } 
}      
</script> 


// in BODY section 
    <div> 
     <form><p>Put your letter here: <input type="text" id="letter" size="5" required><button onclick="givenLetter();">Send</button></p></form> 
    </div> 

Answer 1

試試這個。 由於表單標籤中的按鈕i是提交按鈕的默認行爲。所以表單將被提交併重新加載頁面。所以爲了防止這種行爲，我們使用event.preventDefault();並將count算作一個全局變量。

var given_letters = []; // create an empty array 
 
var count = 0; 
 
    
 

 
function givenLetter() { 
 
    event.preventDefault(); //to prevent reloading the page. 
 
    var max_count = 10; 
 
    var letter = document.getElementById('letter').value; 
 

 
    while (count < max_count) { 
 
     if (letter === "") { 
 
      alert("No letter given");   
 
      return false; 
 
     } 
 
     else {    
 
      count++; 
 
      given_letters.unshift(letter); 
 
      console.log(letter); // returns letter 
 
      console.log(given_letters); // returns array with 1 element 
 
      console.log(count); // returns "1" 
 
      alert("OK"); 
 
      return true; 
 
     } 
 
    } 
 
    while (count === max_count) { 
 
     alert("Sorry. You exceeded the limit of tries."); 
 
     return false; 
 
    } 
 
}  

<div> 
 
      <form> 
 
      <p>Put your letter here: <input type="text" id="letter" size="5" required> 
 
      <button onclick="givenLetter();">Send</button></p></form> 
 
     </div>

Answer 2

表單中按鈕的默認行爲是提交表單...並重新加載頁面（非常愚蠢，IMO）。這就是爲什麼你的腳本似乎沒有記住任何東西。但是有一種方法可以防止這種情況發生。 此外，寫var count = 0;外功能，否則它的每一個函數被調用時被設置爲0。

var count = 0; 

function givenLetter(event) { 
    event.preventDefault(); 
    // .... 

Answer 3

可以使用given_letters.length，而不是count，更少的代碼和它相同的值，則需要使用e.preventDefault();這樣的形式犯規提交表單的是，here它的工作例如，對於e.preventDefault();工作，你需要在按鈕發送事件，像這樣：

<div> 
     <form>  
     <p>Put your letter here: <input type="text" id="letter" size="5" required> 
     <button onclick="givenLetter(event);">Send</button></p> 
     </form> 
    </div> 

的JS更新：

var given_letters = []; // create an empty array 
function givenLetter(e) { 
    e.preventDefault(); 
    var max_count = 10; 
    var letter = document.getElementById('letter').value; 

    while (given_letters.length <= max_count) { 
     if (letter === "") { 
      alert("No letter given");   
      return false; 
     } 
     else {    
      given_letters.unshift(letter); 
      console.log(letter); // returns letter 
      console.log(given_letters); // returns array with 1 element 
      console.log(given_letters.length);//here is your count already 
      alert("OK"); 
      return true; 
     } 
    } 
    while (given_letters.length === max_count) { 
     alert("Sorry. You exceeded the limit of tries."); 
     return false; 
    } 
}