我的按钮的 javascript 事件侦听器有错误

发布于07月20日

我正在try 做一个非常基本的RPG游戏，当你攻击时，经验条将减少20px的css宽度. 现在我已经完成了，一切似乎都运行得很好，但是当我更快地点击攻击按钮时，我注意到了一个错误.在某个点上，EXP值不会减少20px.它可能只会减少10px，甚至可能是3px.我不确定我的数学实现是错误的，还是我还没有找出的错误.

以下是我的Java脚本代码:

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

以下是我的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;
}

Here is when I clicked the btn slowly:

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

如果您有任何答案，请随时回复.谢谢

我的按钮的 javascript 事件侦听器有错误

推荐答案

Javascript相关问答推荐

鼠标移动时更新画布

使用Apps Script缩短谷歌表中的URL？

if/else JavaScript中的条件行为

我开始使用/url？q=使用Cheerio

在Angular中将样式应用于innerHTML

Angular中计算信号和getter的区别

如何从一个列表中创建一个2列的表？

构造HTML表单以使用表单数据创建对象数组

html + java script！需要帮助来了解为什么我得到(无效的用户名或密码)

实现JS代码更改CSS元素

将内容大小设置为剩余可用空间，但如果需要，可在div上显示滚动条

如何将innerHTML字符串修剪为其中的特定元素？

Eval vs函数()返回语义

SPAN不会在点击时关闭模式，尽管它们可以发送日志(log)等

如何在Press上重新启动EXPO-AV视频？

令牌JWT未过期

如何在下一个js中更改每个标记APEXCHARTS图表的 colored颜色

我为什么要使用回调而不是等待？

如何在Java脚本中并行运行for或任意循环的每次迭代

bootstrap S JS赢得了REACT中的函数/加载