Home Not able to repeat CSS class removal function with JavaScript after running once

Questions

Not able to repeat CSS class removal function with JavaScript after running once

August 3, 2022

I am not able to repeat the animation and class modifications, triggered by either of the two buttons after running through one time. e.g. Click "Bottom Base" a first time: square flashes yellow then remains blue. Click "Bottom Base" once more: nothing changes.

Current behavior:

Click "Bottom Base" a first time: bottom square flashes yellow then remains blue.
Click "Bottom Base" once more: nothing changes with bottom square.

Desired behavior:

Click "Bottom Base" a first time: bottom square flashes yellow then remains blue.
Click "Bottom Base" once more: bottom square flashes yellow then remains blue.

Seeking guidance on how to make this work.

https://jsfiddle.net/8ko3tbva/

const BaseHTMLCollection = [document.getElementById("b1"), document.getElementById("b2")];

function clearBase(b) {
  BaseHTMLCollection[b].classList.remove("occupiedBase");
  BaseHTMLCollection[b].classList.remove("animatedBaseHit");
}

function flashBaseColor(b, a) {
  if (a == "H") {
    BaseHTMLCollection[b].classList.add("animatedBaseHit");
  }
}

function updateBaseColor(b, a) {
  BaseHTMLCollection[b].classList.add("occupiedBase");
  if (b == 1) {
    BaseHTMLCollection[b - 1].classList.remove("occupiedBase");
  }
}

function baseAction(base, action) {

  clearBase(base);
  flashBaseColor(base, action);
  updateBaseColor(base, action);

}

#bases {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 20vw;
  width: 20vw;
  margin-top: 5vw;
  margin-right: 5vw;
}

#b1 {
  bottom: 0;
  left: 0;
}

#b2 {
  top: 0;
  left: 0;
}

.base {
  background: rgb(44, 44, 44);
  border-style: solid;
  border-width: thick;
  box-shadow: -8px 8px 20px black;
  width: 42%;
  height: 42%;
  position: absolute;
}

.animatedBaseHit {
  animation: pulseBaseHit 0.8s 3;
}

@keyframes pulseBaseHit {
  0% {
    transform: scale(1.05);
    background: yellow;
  }
  50% {
    transform: scale(0.9);
    background: rgb(44, 44, 44);
    box-shadow: -2px 2px 20px black;
  }
  100% {
    transform: scale(1.05);
    background: yellow;
  }
}

.occupiedBase {
  background: blue;
}

<button type="button" name="bottomBase" onclick="baseAction(0,'H')">Bottom Base</button>
<button type="button" name="topBase" onclick="baseAction(1,'H')">Top Base</button>

<br><br>

<div id="bases">
  <div id="b1" class="base"></div>
  <div id="b2" class="base"></div>
</div>

>Solution :

A solution would be to first remove the animation class before adding it. Delay the new addition slightly with setTimeout.

 BaseHTMLCollection[b].classList.remove("animatedBaseHit");
 setTimeout(()=>{
     BaseHTMLCollection[b].classList.add("animatedBaseHit");
 });

const BaseHTMLCollection = [document.getElementById("b1"), document.getElementById("b2")];

function clearBase(b) {
  BaseHTMLCollection[b].classList.remove("occupiedBase");
  BaseHTMLCollection[b].classList.remove("animatedBaseHit");
}

function flashBaseColor(b, a) {
  if (a == "H") {
  BaseHTMLCollection[b].classList.remove("animatedBaseHit");
  setTimeout(()=>{
     BaseHTMLCollection[b].classList.add("animatedBaseHit");
  });
  }
}

function updateBaseColor(b, a) {
  BaseHTMLCollection[b].classList.add("occupiedBase");
  if (b == 1) {
    BaseHTMLCollection[b - 1].classList.remove("occupiedBase");
  }
}

function baseAction(base, action) {

  clearBase(base);
  flashBaseColor(base, action);
  updateBaseColor(base, action);

}

#bases {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 20vw;
  width: 20vw;
  margin-top: 5vw;
  margin-right: 5vw;
}

#b1 {
  bottom: 0;
  left: 0;
}

#b2 {
  top: 0;
  left: 0;
}

.base {
  background: rgb(44, 44, 44);
  border-style: solid;
  border-width: thick;
  box-shadow: -8px 8px 20px black;
  width: 42%;
  height: 42%;
  position: absolute;
}

.animatedBaseHit {
  animation: pulseBaseHit 0.8s 3;
}

@keyframes pulseBaseHit {
  0% {
    transform: scale(1.05);
    background: yellow;
  }
  50% {
    transform: scale(0.9);
    background: rgb(44, 44, 44);
    box-shadow: -2px 2px 20px black;
  }
  100% {
    transform: scale(1.05);
    background: yellow;
  }
}

.occupiedBase {
  background: blue;
}

<button type="button" name="bottomBase" onclick="baseAction(0,'H')">Bottom Base</button>
<button type="button" name="topBase" onclick="baseAction(1,'H')">Top Base</button>

<br><br>

<div id="bases">
  <div id="b1" class="base"></div>
  <div id="b2" class="base"></div>
</div>