按钮上的addEventLister只能工作两次，并且只有在刷新窗口时才能工作

单击时有两个按钮我想调用函数我将所有函数封装在play((函数中我尝试在猜测按钮中添加EventListener，但它只在刷新窗口后运行两次警报。

function play() {
let numInput = document.getElementById("input-number");
let resultText = document.getElementById("result-text");
let btnReset = document.getElementById("btn-reset");
let btnGuess = document.getElementById("btn-guess");
let numRandom = null;

function getRandomNumber(min, max){
return Math.floor(Math.random() * (max - min + 1)  + min);   
}
function guessTheNumber(){
numRandom = getRandomNumber(1,5);
numInput = numInput.value;
alert("button clicked")
}
btnGuess.addEventListener("click",function (){
guessTheNumber();
});
}
play();

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guess That Number</title>
<link rel="stylesheet" href="guessthatnumber.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,100&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h3 class="game-header">Guess the number!</h3>
<p class="game-instruction">Enter a number between 1 - 5 below:</p>
<input class="game-input" type="text" id="input-number"
placeholder="Enter your number here"
tabindex="1" autofocus >
<h4 class="game-result" id="result-text">Success!</h4>
<div class="btn-container">
<button class="btn-clear" id="btn-reset">Reset</button>
<button class="btn-guess" id="btn-guess">Guess</button>
</div>
</main>
<script src="guessthatnumber.js"></script>
</body>
</html>

之所以会发生这种情况，是因为每次按下按钮时都会更改numInput值。。numInput = numInput.value;

第一次迭代：numInput等于输入内部的值(假设为5(

所以numInput是5

第二次迭代：numInput等于numInput.value，因为5没有.value属性，所以它是undefined，并且您得到错误

代码的问题出现在guessTheNumber函数中。

您正在使用numRandom = getRandomNumber(1, 5);计算随机数，并在下一行中指定numInput = numInput.value;。这里numInput是您的输入元素。您正在用数字覆盖该变量。guessTheNumber下次执行时，numInput将是一个字符串，而numInput.value将是未定义的。第三次尝试访问未定义的值时，这将引发控制台错误，如Uncaught TypeError: Cannot read properties of undefined (reading 'value')

更正该代码段以使代码稳定。

我对该部分进行了评论，以使代码不被破坏。

function play() {
let numInput = document.getElementById("input-number");
let resultText = document.getElementById("result-text");
let btnReset = document.getElementById("btn-reset");
let btnGuess = document.getElementById("btn-guess");
let numRandom = null;
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function guessTheNumber() {
numRandom = getRandomNumber(1, 5);
// numInput = numInput.value;
console.log(numRandom);
alert("button clicked")
}
btnGuess.addEventListener("click", function () {
guessTheNumber();
});
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,100&display=swap"
rel="stylesheet">
<main>
<h3 class="game-header">Guess the number!</h3>
<p class="game-instruction">Enter a number between 1 - 5 below:</p>
<input class="game-input" type="text" id="input-number" placeholder="Enter your number here" tabindex="1" autofocus>
<h4 class="game-result" id="result-text">Success!</h4>
<div class="btn-container">
<button class="btn-clear" id="btn-reset">Reset</button>
<button class="btn-guess" id="btn-guess">Guess</button>
</div>
</main>

调用与字段相同的变量numInput不是一个好主意，这是代码中的主要问题
你没有成功

您可以通过将函数移动到之外来简化代码

const numInput = document.getElementById("input-number"),
resultText = document.getElementById("result-text"),
btnReset = document.getElementById("btn-reset"),
btnGuess = document.getElementById("btn-guess");
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function play() {
let numRandom = getRandomNumber(1, 5);
let num = +numInput.value;
resultText.hidden = numRandom != num;
console.log(numRandom === num ? "you guessed right" : "you guessed wrong")
}
btnGuess.addEventListener("click", play)
btnReset.addEventListener("click", function() {  resultText.hidden = true; numInput.value = ""; })

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guess That Number</title>
<link rel="stylesheet" href="guessthatnumber.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,100&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h3 class="game-header">Guess the number!</h3>
<p class="game-instruction">Enter a number between 1 - 5 below:</p>
<input class="game-input" type="text" id="input-number" placeholder="Enter your number here" tabindex="1" autofocus>
<h4 class="game-result" hidden id="result-text">Success!</h4>
<div class="btn-container">
<button class="btn-clear" id="btn-reset">Reset</button>
<button class="btn-guess" id="btn-guess">Guess</button>
</div>
</main>
<script src="guessthatnumber.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：