Javascript - I've set the button to disable after the particular function but it does not execute when I click on im butron

RevanthRockie
July 28, 2023
251 views
1 vote
2 Answers

I got multiple buttons and after a particular function is run, I wanted the div element to be set disabled until the page is reloaded. I tried making the button disable too but that didn’t work either

 <div class='container'>
        <div  class = 'btn' id = 'rock'>
            <button ><img src="./images/rock-svgrepo-com.svg"></button>
        </div>

        <div class = 'btn' id = 'paper'>
            <button > <img src="./images/paper-plane-svgrepo-com.svg"></button>
        </div>

        <div class= 'btn'  id = 'scissors'>
            <button> <img src="./images/scissors-svgrepo-com.svg"></button>
        </div>
    </div>

I have used the specific javascript to disable the div

function endGame(){
    const buttons = document.querySelectorAll('.btn')
    buttons.disabled = true;
    console.log(buttons);
};

Tags: javascript

Answers

Chosen as BEST ANSWER

Using removeEventListener fixed by terminating the function from running, Thank you though!

function endGame(){
    
       
        const buttons = document.querySelectorAll('.btn');
         // iterating through each button element 
        buttons.forEach(button => {
          button.removeEventListener('click', playRound); // removes the orginal eventListener by matching the event and the function.
          button.style.pointerEvents = 'none';
            
          });
        };

(Edit)

- Stefnotch
- July 28, 2023 at 10:15 am
- 0 votes
0
Return types matter.

const buttons = document.querySelectorAll('.btn') returns a NodeList of div elements, and not a single button.

So instead, you have to iterate over the list and disable each button.

As in
```
// Select every *button* element inside the container
const buttons = document.querySelectorAll('.container button');

// Set the disabled attribute. 
// Note that only form elements, like buttons, can be disabled
buttons.forEach(button => button.disabled = true);
```
Login or Signup to reply.