我的点击事件监听器需要我点击两次才能运行我的函数。 该程序只是一个将背景颜色更改为随机生成的十六进制代码的按钮，它还通过 innerHTML 将十六进制代码添加到 div 标签中。我似乎无法在我的代码中找到任何错误。我已经仔细阅读了，仍然不知道问题出在哪里。这是 Javascript 代码和标记。
JAVASCRIPT
const hex = ['0', '1','2','3','4','5','6','7','8','9','A','B','C',
'D','E','F'
]
// the hex color code display div tag id
let bgColor = document.getElementById("color-display");
hexNumber = '#';
hexNumber2 = '';
let clicker = document.getElementById('color-btn')
let event1 = 'stopped'
clicker.addEventListener('click', function(){
if (event1 === 'stopped') {
for ( i = 0; i < 6; i++) {
let randomNumber = Math.floor(Math.random() * hex.length);
hexNumber2 = hexNumber2 + hex[randomNumber];
}
event1 = 'started';
}
else {
let mainHex = '#' + hexNumber2;
console.log(mainHex);
bgColor.innerHTML = 'Background color : ' + mainHex;
document.body.style.background = mainHex;
hexNumber2 = '';
event1='stopped';
}
}
)
<!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>Document</title>
<link rel ="stylesheet"
type="text/css"
href="hexgenerator.css">
</head>
<body>
<div class="title-bar"><button class="title-btn1">Color Flipper</button>
<a href="brain work/hexgenerator.html"><button class="title-btn2"> Simple Hex</button></a>
</div>
<div class="container">
<div class="color-container">
<div class="color-display" id="color-display">
Background color : not selected
</div>
</div>
<div>
<button id="color-btn" class="color-btn">CLICK ME</button>
</div>
</div>
<script src="hexgenerator.js"></script>
</body>
</html>
我认为在成功点击事件后，它会在某处将布尔值切换为假，当我再次单击该按钮时，它会将布尔值切换为真并运行我不知道的代码？？？但是我必须点击两次按钮才能工作为什么？？？
看起来问题出在您用作标志的 event1 变量上，以确定按钮是否已被单击。在您的代码中，您最初将 event1 变量设置为“已停止”，然后在第一次单击按钮时将其切换为“已启动”。
问题是在随后的点击中，event1 变量仍设置为“已启动”，因此 if 块中的代码不会再次运行。这就是为什么你需要点击两次才能让代码运行。
解决此问题的一种方法是在第二次单击按钮时将 event1 变量重置为“已停止”。这是您应该可以使用的代码的更新版本：
const hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
// the hex color code display div tag id
let bgColor = document.getElementById("color-display");
let hexNumber = '#';
let hexNumber2 = '';
let clicker = document.getElementById('color-btn');
let event1 = 'stopped';
clicker.addEventListener('click', function() {
if (event1 === 'stopped') {
for (let i = 0; i < 6; i++) {
let randomNumber = Math.floor(Math.random() * hex.length);
hexNumber2 = hexNumber2 + hex[randomNumber];
}
event1 = 'started';
} else {
let mainHex = '#' + hexNumber2;
console.log(mainHex);
bgColor.innerHTML = 'Background color : ' + mainHex;
document.body.style.background = mainHex;
hexNumber2 = '';
event1 = 'stopped'; // reset event1 to 'stopped'
}
});
有了这个更新，当按钮被第二次点击时，event1 变量被重置为“停止”，所以 if 块中的代码将再次运行。