Javascript Can'；t按箭头按钮使div块移动

我想让一个div块在箭头按钮上移动。但它不起作用。我把扣子放在桌子上

document.getElementById（“upbutton”）.onclick=function up（）{
var block=document.getElementById（“block”）；
var dos=“30px”；
var h=“630px”；
block.style.position=“相对”；
while（block.style.top>h）{
block.style.top=“300px”+dos+“px”；
dos+=“30px”；
}
};
您的代码有很多问题


不能将字符串添加到整数，否则将导致字符串
串联。如果添加
“300px”+10
，将导致
300px10
非
310px
我不明白你的逻辑你想做什么但是
while（block.style.top>h）{
将永远不会通过，因为块的样式将在开始时再次成为字符串
0px
，并且
h
为
630
。
您必须在while循环中使用
parseInt（block.style.top）
进行比较
你的div块没有宽度、高度或颜色，你看不到任何东西

下面是我使用箭头移动div的实现。

将您的位置存储到对象pos
var pos={top:0，left:0}；

然后将事件添加到按钮中

向上：

更新
pos.top+=dos
值并将其应用于
block.style.top=pos.top+'px'；

document.getElementById("upbutton").onclick = function up() {
  //Update if top is not equal to zero not allowed to go out of window.
  if(pos.top!=0) {pos.top-=dos; block.style.top = pos.top+'px';}
};

document.getElementById("downbutton").onclick = function down() {
  if(pos.top<h) {pos.top+=dos; block.style.top = pos.top+'px';}
};

document.getElementById("leftbutton").onclick = function left() {
  if(pos.left!=0) {pos.left-=dos; block.style.left = pos.left+'px';}
};

document.getElementById("rightbutton").onclick = function right() {
  if(pos.top<h) {pos.left+=dos; block.style.left = pos.left+'px';}
};

向下：

更新
pos.top-=dos
值并将其应用于
block.style.top=pos.top+'px'；

document.getElementById("upbutton").onclick = function up() {
  //Update if top is not equal to zero not allowed to go out of window.
  if(pos.top!=0) {pos.top-=dos; block.style.top = pos.top+'px';}
};

document.getElementById("downbutton").onclick = function down() {
  if(pos.top<h) {pos.top+=dos; block.style.top = pos.top+'px';}
};

document.getElementById("leftbutton").onclick = function left() {
  if(pos.left!=0) {pos.left-=dos; block.style.left = pos.left+'px';}
};

document.getElementById("rightbutton").onclick = function right() {
  if(pos.top<h) {pos.left+=dos; block.style.left = pos.left+'px';}
};

右侧：

更新
pos.left+=dos
值并将其应用于
block.style.left=pos.left+'px'；

document.getElementById("upbutton").onclick = function up() {
  //Update if top is not equal to zero not allowed to go out of window.
  if(pos.top!=0) {pos.top-=dos; block.style.top = pos.top+'px';}
};

document.getElementById("downbutton").onclick = function down() {
  if(pos.top<h) {pos.top+=dos; block.style.top = pos.top+'px';}
};

document.getElementById("leftbutton").onclick = function left() {
  if(pos.left!=0) {pos.left-=dos; block.style.left = pos.left+'px';}
};

document.getElementById("rightbutton").onclick = function right() {
  if(pos.top<h) {pos.left+=dos; block.style.left = pos.left+'px';}
};

您的代码有很多问题


不能将字符串添加到整数，否则将导致字符串
连接。如果添加
“300px”+10
，则会导致
300px10
非
310px
我不明白你的逻辑你想做什么但是
while（block.style.top>h）{
将永远不会通过，因为块的样式将在开始时再次成为字符串
0px
，并且
h
为
630
。
您必须在while循环中使用
parseInt（block.style.top）
进行比较
你的div块没有宽度、高度或颜色，你看不到任何东西

下面是我使用箭头移动div的实现。

将您的位置存储到对象pos
var pos={top:0，left:0}；

然后将事件添加到按钮中

向上：

更新
pos.top+=dos
值并将其应用于
block.style.top=pos.top+'px'；

document.getElementById("upbutton").onclick = function up() {
  //Update if top is not equal to zero not allowed to go out of window.
  if(pos.top!=0) {pos.top-=dos; block.style.top = pos.top+'px';}
};

document.getElementById("downbutton").onclick = function down() {
  if(pos.top<h) {pos.top+=dos; block.style.top = pos.top+'px';}
};

document.getElementById("leftbutton").onclick = function left() {
  if(pos.left!=0) {pos.left-=dos; block.style.left = pos.left+'px';}
};

document.getElementById("rightbutton").onclick = function right() {
  if(pos.top<h) {pos.left+=dos; block.style.left = pos.left+'px';}
};

向下：

更新
pos.top-=dos
值并将其应用于
block.style.top=pos.top+'px'；

document.getElementById("upbutton").onclick = function up() {
  //Update if top is not equal to zero not allowed to go out of window.
  if(pos.top!=0) {pos.top-=dos; block.style.top = pos.top+'px';}
};

document.getElementById("downbutton").onclick = function down() {
  if(pos.top<h) {pos.top+=dos; block.style.top = pos.top+'px';}
};

document.getElementById("leftbutton").onclick = function left() {
  if(pos.left!=0) {pos.left-=dos; block.style.left = pos.left+'px';}
};

document.getElementById("rightbutton").onclick = function right() {
  if(pos.top<h) {pos.left+=dos; block.style.left = pos.left+'px';}
};

右侧：

更新
pos.left+=dos
值并将其应用于
block.style.left=pos.left+'px'；

document.getElementById("upbutton").onclick = function up() {
  //Update if top is not equal to zero not allowed to go out of window.
  if(pos.top!=0) {pos.top-=dos; block.style.top = pos.top+'px';}
};

document.getElementById("downbutton").onclick = function down() {
  if(pos.top<h) {pos.top+=dos; block.style.top = pos.top+'px';}
};

document.getElementById("leftbutton").onclick = function left() {
  if(pos.left!=0) {pos.left-=dos; block.style.left = pos.left+'px';}
};

document.getElementById("rightbutton").onclick = function right() {
  if(pos.top<h) {pos.left+=dos; block.style.left = pos.left+'px';}
};

我将这样做：


var block=document.getElementById（“block”）；
功能调整位置（dX，dY）{
block.style.left=parseInt（block.style.left）+dX+'px'；
block.style.top=parseInt（block.style.top）+dY+'px'；
}
document.getElementById（“upbutton”）.onclick=（）=>adjustPos（0，-10）；
document.getElementById（“leftbutton”）.onclick=（）=>adjustPos（-10,0）；
document.getElementById（“rightbutton”）.onclick=（）=>adjustPos（10,0）；
document.getElementById（“downbutton”）.onclick=（）=>adjustPos（0，10）；
#块{
宽度：10px；
高度：20px；
背景颜色：蓝色；
位置：固定；
}

⇑
⇐
ⓧ
⇒
⇓
我将这样做：


var block=document.getElementById（“block”）；
功能调整位置（dX，dY）{
block.style.left=parseInt（block.style.left）+dX+'px'；
block.style.top=parseInt（block.style.top）+dY+'px'；
}
document.getElementById（“upbutton”）.onclick=（）=>adjustPos（0，-10）；
document.getElementById（“leftbutton”）.onclick=（）=>adjustPos（-10,0）；
document.getElementById（“rightbutton”）.onclick=（）=>adjustPos（10,0）；
document.getElementById（“downbutton”）.onclick=（）=>adjustPos（0，10）；
#块{
宽度：10px；
高度：20px；
背景颜色：蓝色；
位置：固定；
}

⇑
⇐
ⓧ
⇒
⇓
这可能是一个起点


var block=document.getElementById（“block”）；
document.getElementById（“upbutton”）.onclick=function up（）{
调整位置（0，-10）；
};
document.getElementById（“leftbutton”）.onclick=function up（）{
调整位置（-10,0）；
};
document.getElementById（“rightbutton”）.onclick=function up（）{
调整位置（10,0）；
};
document.getElementById（“downbutton”）.onclick=function up（）{
调整位置（0,10）；
};
document.getElementById（“resetbutton”）.onclick=function up（）{
block.style.left=50+‘px’；
block.style.top=50+‘px’；
};
功能调整位置（dX，dY）{
block.style.left=parseInt（block.style.left）+dX+'px'；
方块