1

Тема: переміщення цілі 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';
}

2

Re: переміщення цілі JavaScript

44px має бути разом

3

Re: переміщення цілі JavaScript

І буде тоді працювати?

4

Re: переміщення цілі JavaScript

sasha87 написав:

І буде тоді працювати?

Є лише один спосіб дізнатись, перевірити.

5

Re: переміщення цілі JavaScript

Я зараз на жаль не можу перевірити.

6

Re: переміщення цілі JavaScript

спрацьовує тільки 1 раз
а для зміщення вправо азагалі не працює

document.getElementById('my_target').style.right = '4px';

7

Re: переміщення цілі JavaScript

sasha87 написав:

спрацьовує тільки 1 раз

Скажіть, а прочитати, що означають параметри CSS right і left, вам що саме заважає? Уміння гуглити - критичне для сучасного програміста.