JavaScript图片上下移动失效问题：已实现左右移动，上下无响应

嘿，我一眼就瞅出问题所在啦！你的左右移动功能正常，是因为初始化时给rocketPicture设置了left: 0px的初始值，但**top属性完全没初始化**——第一次调用moveDown时，parseInt(rocketPicture.style.top)会返回NaN（毕竟这个属性之前压根没被设置过），NaN和任何数字运算结果还是NaN，自然就看不到图片下移的效果啦。

解决方案 #

咱们只需要补上top的初始值，或者在移动函数里做个兜底处理就行，两种方法都能搞定：

方法1：初始化时同时设置top值 #

在初始化样式的代码里，给top也加上初始值：

leftButton.addEventListener("click", moveLeft);
rightButton.addEventListener("click", moveRight);
downButton.addEventListener("click", moveDown);
// 初始化时同时设置left和top
rocketPicture.style.position = "relative";
rocketPicture.style.left = '0px';
rocketPicture.style.top = '0px'; // 新增这行！

function moveLeft(){
 rocketPicture.style.left = parseInt(rocketPicture.style.left ) - 10 + 'px';
}
function moveRight(){
 rocketPicture.style.left = parseInt(rocketPicture.style.left ) + 10 + 'px';
}
function moveDown(){
 rocketPicture.style.top = parseInt(rocketPicture.style.top) + 10 + 'px';
}

方法2：在移动函数里做兜底处理 #

如果不想提前设置top初始值，也可以在moveDown函数里判断当前top值是否有效，无效就用0兜底：

function moveDown(){
  // 用|| 0兜底，当parseInt返回NaN时自动取0
  const currentTop = parseInt(rocketPicture.style.top) || 0;
  rocketPicture.style.top = currentTop + 10 + 'px';
}

// 如果需要上移功能，同理处理moveUp函数
function moveUp(){
  const currentTop = parseInt(rocketPicture.style.top) || 0;
  rocketPicture.style.top = currentTop - 10 + 'px';
}

这样修改后，图片的上下移动就会和左右移动一样正常工作啦！

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