JavaScript : How do disable multiple buttons in JavaScript after the user clicks once

Question

this is what I tried So I am trying to disable the options buttons in my quiz app after the user selects a option.

I am doing this because when the correct option is shown after the user selects any option if I click the correct answer again the score counter increases and also if the user selects the wrong answer and then if he selects the correct answer then he can continue the game.

This is the quiz game check it out and see the prob=> 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;
    }
}

The attribute is `disabled` rather than `disable`. So, `elems[i].disabled = true;` this would disable the button — Nithish, Jul 17 '21 at 07:11

score 0 · Answer 1 · answered Jul 17 '21 at 07:12

0

You can just loop through them all with querySelectorAll and 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>

answered Jul 17 '21 at 07:12

Kinglish

23,358
3
22
43

even thought i used your code and put it into my project it still doesn't work – Joel Mathew Jul 17 '21 at 10:23
i can't imagine why not.. it's pretty straight forward code – Kinglish Jul 17 '21 at 23:33

score 0 · Answer 2 · answered Jul 17 '21 at 07:15

0

Replace "disable" with "disabled"

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

answered Jul 17 '21 at 07:15

Ali Raza Cheema

21
3

score 0 · Answer 3 · answered Jul 17 '21 at 07:23

0

you are using 'disable' instead of 'disabled'
it will be like this

elems[i].disabled = true;

answered Jul 17 '21 at 07:23

Anonymous Coder

556
2
16

score 0 · Answer 4 · answered Jul 17 '21 at 07:28

0

Use querySelectorAll to get an array of buttons and it should work

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

answered Jul 17 '21 at 07:28

VeeGee

52
4

JavaScript : How do disable multiple buttons in JavaScript after the user clicks once

4 Answers4