我无法离开JavaScript的while循环

如何解决我无法离开JavaScript的while循环

在重构代码之前，我正在重构以下代码。我正在用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)
    // })

解决方法

您的while循环会将事件监听器添加到按钮上。

然后添加另一个。

然后添加另一个。

无限等等。

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

如果曾经要调用事件监听器，可能会更改，但是如果要在其上注册click事件，则不会调用事件处理程序 因为主事件循环是太忙，而您正在运行，而无法检查。

,

是因为这段代码。

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

当用户单击按钮时，它将更新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>

,

这是因为addeventlistener函数未在循环中执行（仅在单击按钮时执行）。因此不应用buttonIndex ++。

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