How do I disable an onlick event until my progress bar has finished?

Question

Here is my JSFiddle: https://jsfiddle.net/y6pnq7k5/3/

Sorry if it's too much code, I tried to narrow it down.

The main functions to look at are generatorClicked() and progressBarAnimation().

When you click on the boxes (for example fire spell tome), I have a progress bar animation that goes across the div. The problem is that if you spam click the div it will reset the progress bar back at the start, and because this is meant to be an idle game the progress bar should not be affected until it has finished it's job. One solution I've tried are disabling pointer events via style:

var isClicked = true;
document.GetElementByID(this.id).style.pointerEvents = 'none';
//progress bar animation - after it's done isClicked = false
if(!isClicked) {
    document.GetElementByID(this.id).style.pointerEvents = 'auto';
}

This had issues with either the progress bar not being clickable after the first progress bar finished, or it would still allow the click spam to reset the bar, depending on where I made isClicked false.

I've also tried creating a shield like the top answer in this post

Which just stopped the progress bar from moving at all.

I don't have any libraries, just vanilla JS. I know that my implementation of this progress bar animation is also dubious, but even if I refactor it I still would need the progress bar to not be affected by subsequent clicks as it will affect the gameplay.

You can toggle a class that set the pointer-events property. Refer to https://stackoverflow.com/questions/44719980/how-to-prevent-the-click-event-using-css#45796015 — Oluwafemi Sule, Jul 22 '21 at 21:24
@OluwafemiSule how would I then reenable the ability to click the div if it's class css is set to no pointer events? — Noah Jackson, Jul 22 '21 at 21:27
It's similar to what you currently do anyway. However I missing the picture. Could you create a runnable jsfiddle that shows the situation you want to resolve? — Oluwafemi Sule, Jul 22 '21 at 21:32
@OluwafemiSule [Here](https://jsfiddle.net/y6pnq7k5/3/) is the JSFiddle that allows you to cancel the progress bar by clicking the div while it's in progress, the problem I want to solve. [Here](https://jsfiddle.net/y6pnq7k5/4/) is a JSFiddle with a solution I tried, which does not fix the problem. — Noah Jackson, Jul 22 '21 at 21:39

Oluwafemi Sule · Accepted Answer · 2021-07-23T09:15:53.950

pointer-events CSS property can be set to 'none' before the progress bar animation starts and reset to its original value after the progress bar animation stops.

var fireGenerators = ["fireSpellTome", "fireWizard", "fireTeacher", "fireSchool"];
var fireGeneratorStrings = ["Fire Spell Tome", "Fire Wizard", "Fire Teacher", "Fire School"];
var fireGeneratorAmount = new Array();

function initFireGenerators() {
  for (i = 0; i < fireGenerators.length; i++) {
    fireGeneratorAmount.push(0);

    var div = document.createElement('div');
    div.id = fireGenerators[i];
    div.className = "fireGenerators";
    div.innerHTML = fireGeneratorStrings[i];
    div.onclick = generatorClicked;

    var progressBar = document.createElement('div');
    progressBar.id = fireGenerators[i] + "ProgressBar";
    progressBar.className = "progressBar";

    var amount = document.createElement('span');
    amount.id = "amountFireGen" + i;
    amount.class = "fireAmounts";
    amount.innerHTML = "0";

    div.appendChild(progressBar);
    div.appendChild(amount);
    main.appendChild(div);
  }
}

function generatorClicked() {
  console.log(this.id + " clicked");
  progressBarAnimation(this.id);
}

function progressBarAnimation(parentID) {
  const progressBarContainer = document.getElementById(parentID);
  const progressBar = document.getElementById(parentID + "ProgressBar"); //Get progressBar div element
  let id = null;
  let currentWidth = 0; //Set the width to 0 

  clearInterval(id);
  progressBarContainer.style.pointerEvents = "none";
  id = setInterval(frame, 10); //TEMPORARY - Need to check what generator and match progress with speed

  function frame() {
    if (currentWidth == 330) {
      clearInterval(id);
      progressBar.style.width = "0px";
      progressBarContainer.style.pointerEvents = "auto";
    } else {
      currentWidth++;
      progressBar.style.width = currentWidth + "px";
    }
  }

  return true;
}

initFireGenerators();

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}

div span {
    margin-left: 15px;
}

#main {
    width: 100%;
    height: 80%;
}

#fireSpellTome {
    background-size: 100% 100%;
    background-image: url('../images/firetome.png');
    background-repeat: no-repeat;
}

.fireGenerators {
    position: relative;
    width: 330px;
    height: 170px;
    border:2px solid #000;
    margin-top: 1px;
}

.progressBar {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    background-color: #111;
    opacity: 0.5;
}
.noPointers {
  pointer-events: none;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="stylesheets/game.css">
    </head>
    <body>
        <h1><span id="fireMagicAmount">0</span><br></h1>
        <div id=main></div>
    </body>
</html>

This actually did work, my end was breaking because I wasn't using the parent container's id when changing pointer events. Thank you. — Noah Jackson, Jul 23 '21 at 08:08
Yeah, the container where the event listener is registered should be the one targeted. — Oluwafemi Sule, Jul 23 '21 at 09:16

How do I disable an onlick event until my progress bar has finished?

1 Answers1