我正在使用 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 上的“执行”再次调用该函数时,没有任何反应。
有没有办法使用不同的按钮多次调用一个函数?
最佳答案
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>
关于javascript - 如何从不同的按钮多次调用一个函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61032348/