Question

任务： 我创建了一个带有4个按钮的形状，需要它根据点击的按钮（纯JS）移动到4个方向。这就是我创建的 - 看看代码片段。

问题：左/右方向效果很好，但上/下方向不行。知道为什么吗？看起来两个方向都是相同的。：/

非常感谢你的帮助，非常感谢！

＆＃13;

var shape = document.getElementById("shape"),
  leftBtn = document.getElementById("leftBtn"),
 rightBtn = document.getElementById("rightBtn"),
    upBtn = document.getElementById("upBtn"),
 downBtn  = document.getElementById("downBtn");

 leftBtn.onclick = function(){
 	moveLeft();
 }
 rightBtn.onclick = function(){
 	moveRight();
 }
 upBtn.onclick = function(){
 	moveUp();
 }
 downBtn.onclick = function(){
 	moveDown();
 }


function moveLeft() {
    var val = (parseInt(shape.style.left) || 0) - 50;
    shape.style.left = val + "px";
}

function moveUp() {
    var val = (parseInt(shape.style.top) || 0) - 50;
    shape.style.left = val + "px";
}

function moveRight() {
    var val = (parseInt(shape.style.left) || 0) + 50;
    shape.style.left = val + "px";
}

function moveDown() {
    var val = (parseInt(shape.style.top) || 0) + 50;
    shape.style.left = val + "px";
}

＆＃13;

body{
	background-color: black;
}

#shape{
	background-color: red;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: relative;
}

＆＃13;

<html>
<head>
  <title>JavaScript and the Document Object Model</title>
  <link rel="stylesheet" type="text/css" href="shape.css">
</head>
<body>
<div id="container">
	<div id="shape">
	</div>
	<div id="buttons">
		<button class="button" id="leftBtn" direction="left">left</button>
		<button class="button" id="upBtn" direction="up">up</button>
		<button class="button" id="downBtn" direction="down">down</button>
		<button class="button" id="rightBtn" direction="right">right</button>
	</div>
</div>
<script type="text/javascript" src="shape.js"></script>
</body>
</html>

＆＃13;

Answer 1

正如@Temani指出的那样，在函数 moveUp 和 moveDown 中，更改 shape.style .left 到 shape.style.top 将解决问题。

var shape = document.getElementById("shape"),
  leftBtn = document.getElementById("leftBtn"),
 rightBtn = document.getElementById("rightBtn"),
    upBtn = document.getElementById("upBtn"),
 downBtn  = document.getElementById("downBtn");

 leftBtn.onclick = function(){
 	moveLeft();
 }
 rightBtn.onclick = function(){
 	moveRight();
 }
 upBtn.onclick = function(){
 	moveUp();
 }
 downBtn.onclick = function(){
 	moveDown();
 }


function moveLeft() {
    var val = (parseInt(shape.style.left) || 0) - 50;
    shape.style.left = val + "px";
}

function moveUp() {
    var val = (parseInt(shape.style.top) || 0) - 50;
    shape.style.top = val + "px";
}

function moveRight() {
    var val = (parseInt(shape.style.left) || 0) + 50;
    shape.style.left = val + "px";
}

function moveDown() {
    var val = (parseInt(shape.style.top) || 0) + 50;
    shape.style.top = val + "px";
}

body{
	background-color: black;
}

#shape{
	background-color: red;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: relative;
}

<html>
<head>
  <title>JavaScript and the Document Object Model</title>
  <link rel="stylesheet" type="text/css" href="shape.css">
</head>
<body>
<div id="container">
	<div id="shape">
	</div>
	<div id="buttons">
		<button class="button" id="leftBtn" direction="left">left</button>
		<button class="button" id="upBtn" direction="up">up</button>
		<button class="button" id="downBtn" direction="down">down</button>
		<button class="button" id="rightBtn" direction="right">right</button>
	</div>
</div>
<script type="text/javascript" src="shape.js"></script>
</body>
</html>

将形状移动到不同的方向

1 个答案: