Disable the span from any action-CodePudding

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

CodePudding user response：

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;
}

CodePudding user response：

If I understood the problem right, you want to remove the click event if it is already clicked. It may be actually done using pointer-events: none which disables the event trigger.

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

  if (e.target.className === 'boxForLetter') {
    e.target.classList.add("clickedLetter");
  }

  let clickedLetter = e.target.innerHTML;

});

.boxForLetter {
  display: inline-block;
  background-color: black;
  width: 50px;
  height: 50px;
  cursor: pointer;
  margin-right: 10px;
}

.boxForLetter.clickedLetter {
  background-color: red;
  opacity: 1;
  pointer-events: none;
}

<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>
<div >
</div>