javascript - 无法使 div block 在箭头按钮上移动

Question

我想让一个 div block 在箭头按钮上移动。但它不起作用。我将按钮放在表格中。

document.getElementById("upbutton").onclick = function up() {
  var block = document.getElementById("block");
  var dos = "30px";
  var h = "630px";
  block.style.position = "relative";
  while (block.style.top > h) {
    block.style.top = "300px" + dos + "px";
    dos += "30px";
  }
};

<div id="space">
  <div id="block"></div>
  <div id="arrows">
    <table>
      <tr>
        <th class="arrow"></th>
        <th class="arrow"><button id="upbutton"><img src="up.png"></button></th>
        <th class="arrow"></th>
      </tr>
      <tr>
        <td class="arrow"><button id="leftbutton"><img src="left.png"></button></td>
        <td class="arrow"><button id="resetbutton"><img src="reset.jpg"></button></td>
        <td class="arrow"><button id="rightbutton"><img src="right.png"></button></td>
      </tr>
      <tr>
        <td class="arrow"></td>
        <td class="arrow"><button id="downbutton"><img src="down.png"></button></td>
        <td class="arrow"></td>
      </tr>
    </table>

  </div>
</div>

Answer 1

你的代码有很多问题

• 你不能将字符串添加到一个整数上，它将导致字符串 级联。如果您添加 "300px"+ 10 它将导致 300px10 不是 310px
• 我无法理解你的逻辑你想做什么但是 while (block.style.top > h) { 永远不会通过，因为 block 的样式将在字符串中再次 0px 在开始时 h 是630。 你在 while 循环中使用了 parseInt(block.style.top) 来比较。
• 您的 div block 没有宽度和高度或颜色，您看不到任何东西。

这是我使用箭头移动 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';}
};

向下:

更新 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';}
};

左:

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

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

右:

更新 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 dos = 30;
var h = 630;
var block = document.getElementById("block");
var pos = {top:0,left:0};
 
document.getElementById("upbutton").onclick = function up() {
  if(pos.top!=0) {pos.top-=dos; block.style.top = pos.top+'px';}
};

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

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

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

#block{
  width:100px;
  height:100px;
  position:relative;
  background-color:red;
}

#arrows{
   position:relative;
   z-index:10;
}

<div id="space">
  <div id="block" style="top:0px"></div>
  <div id="arrows">
    <table>
      <tr>
        <th class="arrow"></th>
        <th class="arrow"><button id="upbutton"><img src="up.png"></button></th>
        <th class="arrow"></th>
      </tr>
      <tr>
        <td class="arrow"><button id="leftbutton"><img src="left.png"></button></td>
        <td class="arrow"><button id="resetbutton"><img src="reset.jpg"></button></td>
        <td class="arrow"><button id="rightbutton"><img src="right.png"></button></td>
      </tr>
      <tr>
        <td class="arrow"></td>
        <td class="arrow"><button id="downbutton"><img src="down.png"></button></td>
        <td class="arrow"></td>
      </tr>
    </table>

  </div>
</div>