Javascript-如何使用相同的onkeydown事件在不同场合调用不同的函数

Question

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

我希望用户能够再次按 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 键调用函数 goToNextQuestion()。

Answer 1

一个快速的解决方案是在函数 submit001 中已有的任何代码之前添加一行:

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

然后在函数 gotoNextQuestion 中，您应该确保清除该文本内容(删除“正确”)。

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

更好的方法是使用变量来表示该状态，而不是依赖于 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>