JavaScript:如何在用户单击一次后禁用JavaScript中的多个按钮

Question

这就是我尝试的因此，我试图在用户选择选项后禁用我的智力竞赛应用程序中的选项按钮。

我这样做是因为当在用户选择任何选项之后显示正确选项时，如果我再次点击正确答案，则得分计数器增加，并且如果用户选择了错误答案，然后如果他选择了正确答案，那么他可以继续游戏。

这是一款智力竞赛游戏，请查看问题=>https://coderjm1.github.io/guessthisflag.github.io/

HTML

<div id="answer-buttons" class="btn-grid">
<button  class="btn" onclick="disable()">Answer1</button>
<button  class="btn" onclick="disable()">Answer2</button>
<button class="btn" onclick="disable()">Answer3</button>
<button class="btn" onclick="disable()">Answer4</button>
</div>

JAVASCRIPT

function disable() {
let elems = document.getElementsByClassName('btn')
for(let i = 0; i < elems.length; i++){
elems[i].disable = true;
}
}

Answer 1

您可以使用querySelectorAll和setAttribute('disabled',true)循环遍历它们

function disable() {
document.querySelectorAll('.btn').forEach(el => el.setAttribute('disabled', true));
}

<div id="answer-buttons" class="btn-grid">
<button class="btn" onclick="disable()">Answer1</button>
<button class="btn" onclick="disable()">Answer2</button>
<button class="btn" onclick="disable()">Answer3</button>
<button class="btn" onclick="disable()">Answer4</button>
</div>

Answer 2

替换"禁用"；用"；被禁用"；

function disable() {
let elems = document.getElementsByClassName('btn')
for(let i = 0; i < elems.length; i++){
elems[i].disabled = true;
}
}

Answer 3

您使用的是"disable"而不是"disabled">
它将像这个

elems[i].disabled = true;

Answer 4

使用querySelectorAll获取按钮数组，它应该可以

function disable() {
let elems = document.querySelectorAll('.btn')
for(let i = 0; i < elems.length; i++){
elems[i].disabled = true;
}
}