Question

这是我的第一篇文章和Javascript的第二天;）。我尝试创建一个简单的表单，其中：

允许用户在输入字段中输入任何字母/字母。
我想将它发送到我的脚本并且：
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;
    }
}

Answer 2

表单中按钮的默认行为是提交表单...并重新加载页面（非常愚蠢，IMO）。这就是为什么你的脚本似乎没有记住任何东西的原因。但是有一种方法可以防止这种情况发生。另外，在函数外写<{1}} ，否则每次调用函数时都将其设置为0.

var count = 0;

Answer 3

试试这个。由于表单标记内的按钮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>

Javascript - 简单的计数

3 个答案: