Question

我正在尝试对随机问题进行简单测验。输入答案后，用户可以按Enter键检查他的答案是正确还是错误。在那一刻，文本框将被隐藏。

我希望用户能够再次按Enter键以继续下一个问题。但是，既然已经有一个用该键调用的函数，该怎么办？

这就是我正在使用的：

    var country = ["Italy", "Spain", "Portugal", "France"];
    var capital = ["rome", "madrid", "lisbon", "paris"];
    var random001 = Math.floor(Math.random() * country.length);

    document.getElementById("country").innerHTML = country[random001];

    function submit001() {
        var b = input001.value.toLowerCase();
        var text;
        switch (true) {
            case random001 == 0 && b == capital[0]:
            case random001 == 1 && b == capital[1]:
            case random001 == 2 && b == capital[2]:
            case random001 == 3 && b == capital[3]:
                text = "Correct!";
                hideAndShowDIV();
                break;
            default:
                text = input001.value.bold() + " is not correct!";
                document.getElementById("input001").value = "";
        }
        document.getElementById("answer001").innerHTML = text;
    }

    function hideAndShowDIV() {
        var x = document.getElementById("userInput");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }

    function goToNextQuestion() {
        random001 = Math.floor(Math.random() * country.length);
        document.getElementById("country").innerHTML = country[random001];
        hideAndShowDIV()
        document.getElementById("input001").focus();
    }

    <p id="message001">What is the capital of <text id="country"></text>?</p>
    <div id="userInput" style="display:block">
        <input type="text" id="input001" autofocus onKeyDown="if(event.keyCode==13) submit001();">
    </div>
    <p id="answer001"></p>

我想用Enter键调用function goToNextQuestion()。

Answer 1

一种快速的解决方案是在函数submit001的任何代码之前添加一行：

if (document.getElementById("answer001").textContent === "Correct") {
    goToNextQuestion();
}

然后在功能gotoNextQuestion中，请确保清除该文本内容（删除“更正”）。

但是请注意，隐藏键事件不会在input元素上触发，因此您应该在文档上监听该事件。

更好的方法是对该状态使用一个变量，而不是依赖于HTML文档中的内容。

这是一个使用addEventListener的实现，而不是在HTML标签中包含JS代码。注意它是如何在文档级别上侦听的。另外，最好使用事件key属性，而不要使用keyCode属性。

新变量execOnEnter根据“游戏”的状态定义要执行的功能。在代码中将其更改为submit001或goToNextQuestion：

var country = ["Italy", "Spain", "Portugal", "France"];
var capital = ["rome", "madrid", "lisbon", "paris"];
var random001 = Math.floor(Math.random() * country.length);

document.getElementById("country").textContent = country[random001];

var execOnEnter = submit001;
document.addEventListener("keydown", function (e) {
    if (e.key !== "Enter") return;
    execOnEnter();
});

function submit001() {
    var b = input001.value.toLowerCase();
    var text;
    if (b === capital[random001]) {
        text = "Correct!";
        hideAndShowDIV();
        execOnEnter = goToNextQuestion;
    } else {
        text = input001.value.bold() + " is not correct!";
    }
    document.getElementById("input001").value = "";
    document.getElementById("answer001").innerHTML = text;
}

function hideAndShowDIV() {
    var x = document.getElementById("userInput");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

function goToNextQuestion() {
    document.getElementById("answer001").innerHTML = "";
    random001 = Math.floor(Math.random() * country.length);
    document.getElementById("country").innerHTML = country[random001];
    hideAndShowDIV()
    execOnEnter = submit001;
    document.getElementById("input001").focus();
}

<p id="message001">What is the capital of <text id="country"></text>?</p>
<div id="userInput" style="display:block">
    <input type="text" id="input001" autofocus>
</div>
<p id="answer001"></p>

Answer 2

您可以在submit001()函数内部进行检查，以检查userInput控件是否处于隐藏状态，如果是，则直接转到goToNextQuestion。

Answer 3

有几种方法可以做到这一点。但我建议不要使用这种方法，因为点击Enter按钮提交并不直观。我建议添加一个“提交”按钮。无论您如何尝试：

        
        var country = ["Italy", "Spain", "Portugal", "France"];
        var capital = ["rome", "madrid", "lisbon", "paris"];
        var random001 = Math.floor(Math.random() * country.length);

        document.getElementById("country").innerHTML = country[random001];

        function input001_onKeyDown(e){
          if(e.keyCode === 13){
            submit001();
          } else {
            clearParagraph();
          }
        }

        function submit001() {

            var b = input001.value.toLowerCase();
            document.querySelector("#input001").value = ''
            var text;
            switch (true) {
                case random001 == 0 && b == capital[0]:
                case random001 == 1 && b == capital[1]:
                case random001 == 2 && b == capital[2]:
                case random001 == 3 && b == capital[3]:
                    text = "Correct! " + b + " is the capital of " + country[random001];
                    goToNextQuestion();
                    break;
                default:
                    text = b + " is not correct!";
                    document.getElementById("input001").value = "";
            }
            document.getElementById("answer001").innerHTML = text
        }

        function hideAndShowDIV() {
            var x = document.getElementById("userInput");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

        function goToNextQuestion() {
            random001 = Math.floor(Math.random() * country.length);
            document.getElementById("country").innerHTML = country[random001];
            document.getElementById("input001").focus();
        }

        function clearParagraph(){
          document.querySelector("#answer001").innerHTML = ''
        }

    <p id="message001">What is the capital of <text id="country"></text>?</p>
    <div id="userInput" style="display:block">
        <input type="text" id="input001" autofocus onKeyDown="input001_onKeyDown(event)">
    </div>
    <p id="answer001"></p>

Answer 4

无需太详细（我必须对各种情况下的行为有更多了解。。。示例：用户可以回到上一个问题吗？，更改答案，然后重新验证？），我建议使用某种与输入关联或与之相关联的指标（即，在祖先元素上），以跟踪答案是否已得到验证。

例如，如果用户已经点击class="answer-validated"来检查值，则可以给我们一个类（例如data-validated="true"）或数据属性（例如Enter）。对于类，默认情况下将不存在，“验证”代码会将其添加为其逻辑的一部分。同样，数据属性可以默认为“ false”，并在验证答案后更新为“ true”。

这种方法的好处是它使您可以直接控制对输入状态的跟踪，并有可能将其重用于其他功能，包括：

如果用户要重新回答，请重置输入状态，
轻松重置所有问题的状态，而无需刷新/重置页面
根据数据属性的类或状态的存在，在CSS上应用视觉差异
跟踪已检查答案的数量，并限制验证的最大数量（即“提交答案之前您只能检查3个答案”）
等等。

可以从页面上的其他元素推断出状态，但我认为，管理输入本身的状态而不是根据另一个页面元素的状态来确定输入更为有意义。更直接，更不容易对其他元素进行更改而影响输入的功能。

Javascript-如何在不同情况下使用相同的onkeydown事件调用不同的函数

4 个答案: