点击按钮调用JS函数时图片无法每次点击移动16px的问题求解

• 目标图片未设置定位属性：CSS的left、top位移属性仅对设置了relative/absolute/fixed定位的元素生效，未定位元素设置这类属性不会产生位移
• 未提前获取DOM节点：代码中直接使用player变量，没有先通过id获取对应DOM元素，运行时会抛出变量未定义错误
• 缺少初始位移值：未给目标图片设置默认left、top值，首次读取style.left会拿到空字符串，parseInt计算后得到NaN，后续位移逻辑直接失效
• 位移方向计算错误：向左移动对应x轴负方向，应该在当前left值基础上减16，原代码写为加16，方向完全相反
• 存在全局执行的冗余位移代码：函数外写的直接修改left的代码只会在页面加载时执行一次，和点击事件逻辑冲突
• 标签写法错误：img是自闭合标签，不需要额外写闭合，多余闭合标签可能导致DOM结构解析异常

1. 给目标图片添加基础定位属性 #

直接修改player图片标签，添加行内样式设置定位和初始位移值，不需要额外写样式标签：

如果需要让图片相对于外层父容器定位，只需要把position值改为absolute，同时给父容器添加position: relative属性即可，位移逻辑无需调整。该写法不受目标元素和按钮分属不同DIV容器的影响。

2. 替换原有JS逻辑 #

把原有JS代码替换为以下内容，提前获取DOM节点，修正计算逻辑，同时预留其他三个方向的移动函数，方便后续新增按钮使用：

所有代码未使用反引号，不会触发编辑器的无效符号提示。

3. 修改控制按钮的事件绑定 #

替换原有左按钮的标签，修正自闭合写法，绑定正确的函数名：

后续新增其他三个方向的控制按钮时，只需要给对应按钮的onclick属性绑定对应的moveRight、moveUp、moveDown函数即可。

• 删除函数外单独写的document.getElementById('player').style.left += "-16px";代码，该代码仅会在页面加载时执行一次，无法响应点击操作
• 读取位移值时加||0兜底，避免初始值为空时计算出NaN导致逻辑失效
• 如果需要修改单次移动的距离，直接调整函数里的16为对应数值即可

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