javascript - 如何从不同的按钮多次调用一个函数？

Question

我正在使用 javascript 构建一个测验页面，并希望用户从多项选择中进行选择，然后点击“开始”来检查他们的答案。这是第一个问题的html：

<p class="question">What is the name of Joey's bedtime penguin pal?</p>
<div class="radio">
<div>
    <input type="radio" class="wrong" name="q1">Maurice
</div>
<div>
    <input type="radio" class="wrong" name="q1">Clunkers
</div>
<div>
    <input type="radio" class="right" name="q1">Hugsy
</div>
<div class="button">
    <button type="button" class="go">Go</button>
</div>
<div>
    <img src="images/hugsy.jpg" class="image" style="display: none;"
</div>

我创建了一个由 Go 按钮调用的函数，它会通知用户他们是否正确。这是javascript：

let go = document.querySelector('.go');
let correct = document.querySelector('.right');
let showPic = document.querySelector('img');
let remGo = document.querySelector('button');
let choices = document.querySelector('.radio');
let score = 0;

go.addEventListener('click', checkAnswer);

function checkAnswer() {
    if (correct.checked) {
        showPic.classList.remove('image');
        remGo.remove();
        choices.innerHTML = '<h2 style="color: green;">Correct!</h2>';
        score++;
    } else {
        remGo.remove();
        choices.innerHTML = '<h2 style="color: red;">Incorrect</h2>';
    }
}

此代码按我想要的方式工作，但仅适用于第一个问题。当我尝试通过单击问题 2 上的“开始”再次调用该函数时，没有任何反应。

有没有办法使用不同的按钮多次调用一个函数？

标签： javascriptfunctionevents

Answer 1

document.querySelector('.go'); 只选择第一个匹配元素。

.go要选择您需要使用的类的所有元素querySelectorAll

然后，您需要将事件侦听器分配给返回的所有元素。

这是一个最小的例子：

let buttons = document.querySelectorAll('.go');

for (const button of buttons) {
  button.addEventListener('click', checkAnswer);
}


function checkAnswer() {
    console.log("checkingAnswer...")
}

<div class="button">
    <button type="button" class="go">Go</button>
</div>

<div class="button">
    <button type="button" class="go">Go</button>
</div>

<div class="button">
    <button type="button" class="go">Go</button>
</div>