我无法离开 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)从不改变。

如果调用事件侦听器，它可能会改变，但如果要在其上注册点击事件，事件处理程序不会'不会被调用，因为主事件循环太忙了 运行你有时间查看一下。

Answer 2

是因为addeventlistener函数没有在循环中执行（只有点击按钮时才执行）。所以没有应用 buttonIndex++。

你也应该把它放在 addeventlistener 函数之外。

Answer 3

是因为这段代码。

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>

我无法离开 JavaScript 的 while 循环

I cannot leave from while loop of JavaScript

javascript

google-chrome

review