如何使用javascript使图像上下移动

使用html和javascript，我在js中创建变量以响应我在html中创建的按钮，它们使图像向左、向右、向上和向下移动

图像左右移动很好，但我似乎无法使其上下移动。我认为它应该像左右移动一样工作，但似乎不起作用

这是我的密码

leftButton.addEventListener("click", moveLeft);
    rightButton.addEventListener("click", moveRight);
    downButton.addEventListener("click", moveDown);


    rocketPicture.style.position = "relative";
    rocketPicture.style.left = '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';

---

您已为

style.left

指定了初始值-0，但未为

style.top

指定初始值，因此检查其值会得到

未定义的

现在，
parseInt（未定义）
返回
NaN
，用
NaN
做任何数学运算只会让更多的
NaN
进入这个世界

解决方案：为
style.top
指定初始值，方法与为
style.left
指定初始值相同


作为旁注，在同一步骤func中统一所有这些移动函数可能是值得的，如下所示：

function move(dir, delta) {
  const prev = parseInt( rocketPicture.style[dir] );
  // assert !Number.isNaN(prev)
  rocketPicture.style[dir] = prev + delta + 'px'; 
}

function moveUp() { move('top', -10) }
function moveDown() { move('top', 10) }
function moveLeft() { move('left', -10) }
function moveRight() { move('left', 10) }

{
  "x": 50,
  "y": 100,
  "width": 124,
  "height": 119.19999694824219,
  "top": 100,
  "right": 174,
  "bottom": 219.1999969482422,
  "left": 50
}

您已为
style.left
指定了初始值-0，但未为
style.top
指定初始值，因此检查其值会得到
未定义的

现在，
parseInt（未定义）
返回
NaN
，用
NaN
做任何数学运算只会让更多的
NaN
进入这个世界

解决方案：为
style.top
指定初始值，方法与为
style.left
指定初始值相同


作为旁注，在同一步骤func中统一所有这些移动函数可能是值得的，如下所示：

function move(dir, delta) {
  const prev = parseInt( rocketPicture.style[dir] );
  // assert !Number.isNaN(prev)
  rocketPicture.style[dir] = prev + delta + 'px'; 
}

function moveUp() { move('top', -10) }
function moveDown() { move('top', 10) }
function moveLeft() { move('left', -10) }
function moveRight() { move('left', 10) }

{
  "x": 50,
  "y": 100,
  "width": 124,
  "height": 119.19999694824219,
  "top": 100,
  "right": 174,
  "bottom": 219.1999969482422,
  "left": 50
}

为什么不使用？它提供有关元素的信息，包括其
顶部
和
左侧
位置，而无需使用
parseInt
转换值

它看起来像这样：

function move(dir, delta) {
  const prev = parseInt( rocketPicture.style[dir] );
  // assert !Number.isNaN(prev)
  rocketPicture.style[dir] = prev + delta + 'px'; 
}

function moveUp() { move('top', -10) }
function moveDown() { move('top', 10) }
function moveLeft() { move('left', -10) }
function moveRight() { move('left', 10) }

{
  "x": 50,
  "y": 100,
  "width": 124,
  "height": 119.19999694824219,
  "top": 100,
  "right": 174,
  "bottom": 219.1999969482422,
  "left": 50
}

工作解决方案：


const-box=document.getElementById（“项”）；
函数垂直（值）{
const{top}=box.getBoundingClientRect（）；
box.style.top=`${top+value}px`；
}
函数水平（值）{
const{left}=box.getBoundingClientRect（）；
box.style.left=`${left+value}px`；
}
#项目{
填充：50px；
位置：绝对位置；
背景颜色：紫色；
颜色：白色；
左：50px；
顶部：100px；
}

箱
向上的
向下
左边
对
为什么不使用？它提供有关元素的信息，包括其
顶部
和
左侧
位置，而无需使用
parseInt
转换值

它看起来像这样：

function move(dir, delta) {
  const prev = parseInt( rocketPicture.style[dir] );
  // assert !Number.isNaN(prev)
  rocketPicture.style[dir] = prev + delta + 'px'; 
}

function moveUp() { move('top', -10) }
function moveDown() { move('top', 10) }
function moveLeft() { move('left', -10) }
function moveRight() { move('left', 10) }

{
  "x": 50,
  "y": 100,
  "width": 124,
  "height": 119.19999694824219,
  "top": 100,
  "right": 174,
  "bottom": 219.1999969482422,
  "left": 50
}

工作解决方案：


const-box=document.getElementById（“项”）；
函数垂直（值）{
const{top}=box.getBoundingClientRect（）；
box.style.top=`${top+value}px`；
}
函数水平（值）{
const{left}=box.getBoundingClientRect（）；
box.style.left=`${left+value}px`；
}
#项目{
填充：50px；
位置：绝对位置；
背景颜色：紫色；
颜色：白色；
左：50px；
顶部：100px；
}

箱
向上的
向下
左边
对
太好了，谢谢！有时一切都变得如此混乱，我忽略了最小的事情！这有助于赋予我的代码更多的意义，并让我了解更多我正在做的事情。太好了，谢谢！有时一切都变得如此混乱，我忽略了最小的事情！这有助于赋予我的代码更多的意义，并使我能够更多地理解我正在做的事情。