My javascript event listener for a button is having a bug

I am trying to make a very basic RPG game where when you attack, the exp bar will decrease by 20px in css width.
Now that I have done it and everything seems to be working well, but then I noticed a bug when I clicked the attack button faster. The exp value is not decreasing by 20px at some point. It might just decrease by 10px or maybe even 3px. I am not sure if my math implementation is wrong or it's a bug that I am yet to figure out.

Here is my javascript code :

const atkBtn = document.getElementById("atk-btn");
let expBar = document.getElementById("bar");

function attack(){
    var barWidth = expBar.offsetWidth;
    var atkVal = 20;
    newBar = (barWidth - atkVal)+"px";
    expBar.style.maxWidth = newBar;
    console.log(newBar)
}

atkBtn.addEventListener("click", attack);

Here is my css code :

p{
    margin: 0px;
    display: inline-block;
}

#bar{
    width: 200px;
    height: 15px;
    margin-top: 10px;
    background-color: red;
    display: inline-block;
    max-width: 200px;
    overflow-x: hidden;
    transition: all 0.4s;
}

Here is when I clicked the btn slowly:

Here is when I clicked the btn faster(to simulate gaming condition):

Should you have any answer please feel free to reply. Thanks

This:

transition: all 0.4s;

If two clicks are faster than 0.4s apart, the style is still changing over time and the calculation for the latter click will be based on wherever you are in the transition when clicking. Removing the transition entirely fixes the issue.

To keep the transition as an animation, track the ongoing width separately. Basically, don't use the styling to store data. Instead, store the data separately and build the styling from it. For example:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const atkBtn = document.getElementById("atk-btn");
let expBar = document.getElementById("bar");
let barWidth = 200;

function attack(){
    var atkVal = 20;
    barWidth -= atkVal;
    newBar = barWidth+"px";
    expBar.style.maxWidth = newBar;
    console.log(newBar)
}

atkBtn.addEventListener("click", attack);

<!-- language: lang-css -->

p{
    margin: 0px;
    display: inline-block;
}

#bar{
    width: 200px;
    height: 15px;
    margin-top: 10px;
    background-color: red;
    display: inline-block;
    max-width: 200px;
    overflow-x: hidden;
    transition: all 0.4s;
}

<!-- language: lang-html -->

<button id="atk-btn">Attack</button>
<div id="bar"></div>

<!-- end snippet -->

You are setting the maxWidth instead of width, so the attack function should look like this:

function attack(){
  var barWidth = expBar.offsetWidth;
  var atkVal = 20;
  newBar = (barWidth - atkVal)+"px";
  expBar.style.width = newBar;
  console.log(newBar)
}