Почему с фигурой ничего не происходит?

Question

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- <input type="text" placeholder="Input your name" id="inp1">
    <input type="text" placeholder="Input your age" id="inp2">
    <button onclick="conf(this)" value="100" id="abc">Ok</button> -->
    <div class="cube"></div>
    <script src="script.js"></script>
</body>
</html>

.cube {
    width: 50px;
    height: 50px;
    background-color: #78FF00;
    position: absolute;
    left: 0px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

var cub = document.getElementsByClassName ('cube'),
    currentLeft = parseInt (cub[0].style.left);

cub[0].onclick = function () {
    cub[0].style.left = (currentLeft + 10) + 'px';
    console.log(cub[0].style.left);
}
Почему написанный код не меняет положение квадрата?

Answer 1

Потому что cub[0].style.left возвращает пустую строку, вроде. Вы можете заменить вот это

currentLeft = parseInt (cub[0].style.left);

на вот это

currentLeft = parseInt(window.getComputedStyle(cub[0]).left);

и всё будет хорошо! :)

Читать об этом тут

Answer 2

наверно сначала, прежде чем пробовать менять положение, нужно элементу задать в css свойство position, а уже потом просто применять:

cub[0].style.left = '10px';

.cube {
  position : absolute;
  left : столько то
  и т.д

var cub = document.getElementsByClassName ('cube');

БЛОГ НА HUSL

Почему с фигурой ничего не происходит?

Ответы (2 шт):