按下键盘按键修改元素位置的JavaScript代码不生效如何解决？

• 代码仅执行了加法计算逻辑，没有将计算后的新值重新赋值给元素的style.top属性，修改没有实际生效
• style.top返回值是带单位的字符串（例如0px），直接执行加法会触发字符串拼接，无法得到预期的数值计算结果
• 未给元素设置初始top值时，style.top默认返回空字符串，转换为数值会得到NaN，导致计算失败

CSS 补充初始位置 #

#element {
  position: absolute;
  top: 0; /* 新增初始top值，可根据需求调整初始位置 */
  left: 0; /* 可按需设置初始left值 */
}

JS 修改偏移逻辑 #

document.addEventListener("keypress", (event) => {
    var keyName = event.key;
    if (keyName == "s") {
        const el = document.getElementById("element");
        // 读取当前top的数值，默认值为0
        const currentTop = parseInt(el.style.top) || 0;
        // 计算新偏移值后重新赋值，补上px单位
        el.style.top = currentTop + 100 + 'px';
    };
}, false);

如果需要实现四个方向的偏移，可以在判断分支中补充对应按键逻辑：

• 按下w向上偏移：el.style.top = currentTop - 100 + 'px'
• 按下a向左偏移：el.style.left = (parseInt(el.style.left) || 0) - 100 + 'px'
• 按下d向右偏移：el.style.left = (parseInt(el.style.left) || 0) + 100 + 'px'

内容的提问来源于stack exchange，提问作者UnitedCatdom