Тема: переміщення цілі JavaScript
Є 25 прямокутників. Потрібно щоб елемент "target" переміщувався в прямокутниках (на середину прямокутника) при натисканні на кнопки MoveLeft, MoveRight, MoveUp, MoveDown вліво, вправо, вгору та вниз.
написав функцію для переміщення вліво, але не можу розібратись чому вона не працює.
html:
<!DOCTYPE html>
<html lang="????????" ,????????>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h1 id=""></h1>
<div class="game_field">
<span id="target"></span>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="btn_row-wrapper">
<button onclick="left()">MoveLeft</button>
<button onclick="right()">MoveRight</button>
<button onclick="up()">MoveUp</button>
<button onclick="down()">MoveDown</button>
</div>
</div>
<script src="script1.js"></script>
</body>
</html>css:
* {
box-sizing: border-box;
}
.btn_row-wrapper button {
padding: 200 px;
cursor: pointer;
}
.game_field {
display: flex;
flex-wrap: wrap;
max-width: 502px;
position: relative;
z-index: 0;
border: 1px solid green;
}
#target {
position: absolute;
z-index: 1;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
border-radius: 50%;
background: blueviolet;
font-size: 8px;
}
.box {
width: 100px;
height: 100px;
border: 1px solid green;
}js:
function left() {
document.getElementById('target').style.left = '44 px';
}
