Javascript - 简单计数

Question

这是我第一篇文章，也是我使用 Javascript 的第二天 ;)。我尝试创建一个简单的表单，其中:

1. 允许用户在输入字段中输入任何字母。
2. 然后我想将它发送到我的脚本并且:
   a) 检查是否以表格形式给出了任何东西
   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

可以用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;
    }
}