為什么querySelectorAll沒有選擇我的按鈕？[復制]-有解無憂

這個問題在這里已經有了答案： querySelectorAll 和 getElementsBy* 方法回傳什么？ (12 個回答) 我可以在 querySelectorAll 上使用“addEventListener”嗎？[重復] (1 個回答) 帶有 classList [重復] 4 個答案的 querySelectorAll() 上的 addEventListener 將單擊事件偵聽器添加到具有相同類的元素 5 個答案獲取錯誤未捕獲的型別錯誤：document.querySelectorAll(...).addEventListener 不是函式 3 個答案昨天關門。

我正在做一個測驗。我希望能夠按下答案按鈕并讓模態背景改變顏色。最初，我將 querySelector 用于按鈕類（class='ansbtn'），我只能與一個按鈕進行互動。然后意識到我已經使用了 queryselectorAll，現在它甚至不會識別點擊，甚至不會識別一個按鈕。請參閱下面的代碼

// Get answer options A,B,C,D to change text
let answerA = document.querySelector('#A')
let answerB = document.querySelector('#B')
let answerC = document.querySelector('#C')
let answerD = document.querySelector('#D')

// Get answer button pressed 
let ansbtnpress = document.querySelectorAll(".ansbtn")
ansbtnpress.addEventListener("click", checkAnswer);

function checkAnswer() {
  if (ansbtnpress.innerHTML == questions[0].correct) {
    anscontainer.style.backgroundColor = "green";
    console.log(ansbtnpress.innerHTML);
  } else {
    anscontainer.style.backgroundColor = "red";
  }
}

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div class="container">
      <div id="question">What is an Epidemic?</div>
      <div id="answer-buttons" class="btn-grid">
        <button class="ansbtn" id="A">Answer 1</button>
        <button class="ansbtn" id="B">Answer 2</button>
        <button class="ansbtn" id="C">Answer 3</button>
        <button class="ansbtn" id="D">Answer 4</button>
      </div>
    </div>
  </div>
</div>

關于為什么它無法識別我正在單擊任何按鈕的任何想法？

uj5u.com熱心網友回復：

usingquerySelectorAll將為您提供該類所有按鈕的串列查詢ansbtn，因此為了呼叫addEventListener它們，您就像說：

使該串列可點擊

這沒有意義，因此您需要addEventListener像這樣呼叫每個特定按鈕：

    ansbtnpress[0].addEventListener("click", checkAnswer);
    function checkAnswer(){
    if(ansbtnpress.innerHTML == questions[0].correct){
        anscontainer.style.backgroundColor = "green";
        console.log(ansbtnpress.innerHTML);
    }else {
        anscontainer.style.backgroundColor = "red";
    }
}

這將使第一個可點擊

如果你想讓它們都可以點擊，你可以用 a 遍歷它們for loop：

for(let index = 0; index < ansbtnpress.length; index =1) {

ansbtnpress[index].addEventListener("click", checkAnswer);
function checkAnswer(){
    if(ansbtnpress.innerHTML == questions[0].correct){
        anscontainer.style.backgroundColor = "green";
        console.log(ansbtnpress.innerHTML);
    }else {
        anscontainer.style.backgroundColor = "red";
    }
})}

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/524318.html

標籤：javascripthtml循环dom逻辑

上一篇：定時器結束時做點什么[JS]

下一篇：無法在JavaScript中訪問HTML輸入值