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

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" ></div>
  <div id="b2" ></div>
</div>

CodePudding user response：

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" ></div>
  <div id="b2" ></div>
</div>