Disable the span from any action

Issue

I have a problem in my project.
I created something like keyboard for hangman game with span.
In click situation I need to have disabled span for that letter and if user choose wrong letter the hangman image should be change.
But when I click any button it looks like it is disabled because I changed the color

. clickedLetter{

    background-color :....

    opacity:.1;

    pointer-events: none;

}

But the letter is still clickable and when you click on disabled letter(span) the image of hangman going to change .

I want to add something to stop any action

It is my code:

document.addEventListener("click", (e) => {

if(e.target.className ==='boxForLetter')

{ e.target.classList.add("clickedLetter");}

let clickedLetter= e.target.innerHTML;

…….

….

.

I appreciate any thoughts about this problem

Solution

The problem is in your if statement.

You need to run the code in your if statement NOT below it. If you run your hangman code BELOW your if statement in a delegated click handler, any click will trigger the hangman code. Also, I would recommend checking if the classlist contains a class, not if the class name equals something. This is more modern and allows for more classes on the objects.

if(e.target.classList.contains('boxForLetter'))    
{
   //run hangman code here
   e.target.classList.add("clickedLetter");
   let clickedLetter= e.target.innerHTML;
}

Answered By – imvain2

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published