我不能离开JavaScript的while循环

Question

在重构代码之前，我正在重构下面的代码。我正在console.log中查找我的错误，但找不到。为什么我不能离开循环？

这是代码

const questions = [
["ゲーム市場最も売れたゲームは？"],
]

const answers = [["SFC", "PS2", "NintendoDS","NintendoSwitch"],]

const correct = [["NintendoDS"]]

let $button = document.getElementsByTagName("Button")
const setupQuiz = () =>{
document.getElementById("js-question").textContent = questions[0][0]

let buttonIndex = 0
let buttonLength = $button.length
while (buttonIndex < buttonLength){
$button[buttonIndex].textContent = answers[0][buttonIndex]
buttonIndex++
}
}

setupQuiz()

const clickHandler = (e) => {
if (correct[0][0] === e.target.textContent){
window.alert('Correct!')
} else {
window.alert('Wrong...')
}
}

let buttonIndex = 0
const buttonLength = $button.length
console.log(buttonLength)

//The loop is here...
while (buttonIndex < buttonLength){
$button[buttonIndex].addEventListener('click', (e) => {
clickHandler(e)
buttonIndex++
console.log(buttonIndex)
})
}

//I wanna refactoring below
// $button[0].addEventListener('click', (e) => {
//     clickHandler(e)
// })
//
// $button[1].addEventListener('click', (e) => {
//     clickHandler(e)
// })
//
// $button[2].addEventListener('click', (e) => {
//     clickHandler(e)
// })
//
// $button[3].addEventListener('click', (e) => {
//     clickHandler(e)
// })

Answer 1

while循环为按钮添加了一个事件侦听器。

然后它又添加了一个。

然后它又添加了一个。

等等，无限。

您正在测试的条件(buttonIndex < buttonLength(从未更改。

如果要调用事件侦听器，则可能会发生更改，但如果要在其上注册单击事件，则不会调用事件处理程序，因为主事件循环太忙了正在运行while look to ever检查。

Answer 2

这是因为这段代码。

while (buttonIndex < buttonLength){
$button[buttonIndex].addEventListener('click', (e) => {
clickHandler(e)
buttonIndex++
console.log(buttonIndex)
})
}

当用户点击按钮时，它会更新按钮索引，这就是为什么它永远不会改变。您需要将其移动到事件侦听器之外。

我把这个代码改成

while (buttonIndex < buttonLength) {
$button[buttonIndex].addEventListener('click', (e) => {
clickHandler(e)
console.log(buttonIndex)
})
buttonIndex++
}

现在它运行良好，正如预期的

---

完整代码

const questions = [
["ゲーム市場最も売れたゲームは？"],
]
const answers = [
["SFC", "PS2", "NintendoDS", "NintendoSwitch"],
]
const correct = [
["NintendoDS"]
]
let $button = document.getElementsByTagName("Button")
const setupQuiz = () => {
document.getElementById("js-question").textContent = questions[0][0]
let buttonIndex = 0
let buttonLength = $button.length
while (buttonIndex < buttonLength) {
$button[buttonIndex].textContent = answers[0][buttonIndex]
buttonIndex++
console.log("here", buttonIndex)
}
}
setupQuiz()
const clickHandler = (e) => {
if (correct[0][0] === e.target.textContent) {
window.alert('Correct!')
} else {
window.alert('Wrong...')
}
}
let buttonIndex = 0
const buttonLength = $button.length
console.log("length", buttonLength)
//The loop is here...
while (buttonIndex < buttonLength) {
$button[buttonIndex].addEventListener('click', (e) => {
clickHandler(e)
console.log(buttonIndex)
})
buttonIndex++
}
console.log("stopped")
//I wanna refactoring below
// $button[0].addEventListener('click', (e) => {
//     clickHandler(e)
// })
//
// $button[1].addEventListener('click', (e) => {
//     clickHandler(e)
// })
//
// $button[2].addEventListener('click', (e) => {
//     clickHandler(e)
// })
//
// $button[3].addEventListener('click', (e) => {
//     clickHandler(e)
// })

<button id="js-question">Button</button>

Answer 3

这是因为addeventlistener函数不会在循环中执行(只在单击按钮时执行(。因此不应用buttonIndex++。

您还应该将它放在addeventlistener函数的外部。