Question

我想知道为什么我的页面加载期间会自动调用此guessLetter函数。它假定在用户按下按钮后被调用。有人可以帮助我发现错误吗？非常感谢。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="text" id="guessLetter" /><input id="btn" type="button" value="Enter" />
    <script>
        var wordLetters = ['G', 'O', 'A', 'T'];
        var guessedLetters = ['_', '_', '_', '_'];

        function guessLetter(letter) {
            console.log('2');

        }

        var x = document.getElementById('guessLetter').value;
        document.getElementById('btn').addEventListener("click", guessLetter(x));



    </script>
</body>
</html>

Answer 1

这是因为在添加括号后执行javascript代码时将直接调用函数。

我想，您可以通过将addEventListener代码替换为

来实现所需的功能

var x = document.getElementById('guessLetter').value;
document.getElementById('btn').addEventListener("click", function() {
    guessLetter(x);
});

Answer 2

问题出在这行

document.getElementById('btn').addEventListener("click", guessLetter(x));

您正在调用该函数，而不是将其附加到事件侦听器

将通话替换为

document.getElementById('btn').addEventListener("click", guessLetter);

而不是发送参数，而是尝试在函数内部读取它。像这样：

function guessLetter() {
    var x = document.getElementById('guessLetter').value;
    console.log(x);
}

JavaScript自动运行？

2 个答案: