無法使div塊在箭頭按鈕上移動

Question

我想使箭頭按鈕上的div塊移動。但它不起作用。我把按鈕放在桌子上。

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) {絕不會通過爲塊的風格將是字符串再次0px開始和h是630 。 您在while循環中使用parseInt(block.style.top)進行比較。
• 你的div塊沒有寬度和高度或顏色，你什麼都看不到。

這是我使用箭頭移動div的實現。

Store中的對象POS位置var pos = {top:0,left:0};

然後事件添加到您的按鈕

UP：

更新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>

Answer 2

這是我怎麼會去這個：

var block = document.getElementById("block"); 
 

 
function adjustPos(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);

#block { 
 
    width: 10px; 
 
    height: 20px; 
 
    background-color: blue; 
 
    position: fixed; 
 
}

<div id="space"> 
 
    <div id="block" style="top: 100px; left: 100px;"></div> 
 
    <div id="arrows"> 
 
    <table> 
 
     <tr> 
 
     <th class="arrow"></th> 
 
     <th class="arrow"> 
 
      <button id="upbutton">⇑</button> 
 
     </th> 
 
     <th class="arrow"></th> 
 
     </tr> 
 
     <tr> 
 
     <td class="arrow"> 
 
      <button id="leftbutton">⇐</button> 
 
     </td> 
 
     <td class="arrow"> 
 
      <button id="resetbutton">ⓧ</button> 
 
     </td> 
 
     <td class="arrow"> 
 
      <button id="rightbutton">⇒</button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td class="arrow"></td> 
 
     <td class="arrow"> 
 
      <button id="downbutton">⇓</button> 
 
     </td> 
 
     <td class="arrow"></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>

的主要觀點是，你需要解析字符串作爲一個int（這消除了拖尾「PX」。然後你可以將它添加回來。

此外，您的區塊需要使用position: fixed來定位到頁面的任何位置。

Answer 3

這可能是一個起點。

var block = document.getElementById("block"); 
 
document.getElementById("upbutton").onclick = function up() { 
 
adjustPos(0, -10); 
 
}; 
 

 
document.getElementById("leftbutton").onclick = function up() { 
 
adjustPos(-10, 0); 
 
}; 
 

 
document.getElementById("rightbutton").onclick = function up() { 
 
adjustPos(10, 0); 
 
}; 
 

 
document.getElementById("downbutton").onclick = function up() { 
 
adjustPos(0, 10); 
 
}; 
 

 
document.getElementById("resetbutton").onclick = function up() { 
 
    block.style.left = 50 + 'px'; 
 
    block.style.top = 50 + 'px'; 
 
}; 
 

 
function adjustPos(dX, dY) { 
 
    block.style.left = parseInt(block.style.left) + dX + 'px'; 
 
    block.style.top = parseInt(block.style.top) + dY + 'px'; 
 
}

<div id="space" style="width:100px;height:100px"> 
 
<div id="block" style="background-color: black;position: relative;width: 10px;height: 10px; top:50px; left:50px"></div> 
 
</div> 
 

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

 
</div>