Как сделать передвижение элемента при клике на кнопку?

Question

[colorkid]

Всем привет. Начал изучать JavaScript, поэтому я думаю вопрос элементарный, на который я не смог найти ответа.

Нужно сделать такую штуку, чтобы при нажатии на div class="button", другой div class="ball" переместился, но не просто 1 раз переместился, а чтобы к свойству, например, left (у div class="ball") значение увеличилось, скажем на + 20px. Т.е. если изначально у div class="ball" left:100px, то после 1 нажатия оно 120px, еще раз нажали - 140px и т.д.

Как такое реализовать?
Спасибо.
p.s. Желательно если предложите решение на чистом JS.

Comments

[colorkid]

вот что имею:
Go

var butToGo = document.querySelector('.buttom');
var ball = document.querySelector('.ball');
ball.style.left = "100px";

butToGo.onclick = function () {
и думаю сюда написать типа + 20px;
}
а вообще если это все не о том, то написанный код с 0, мне бы помог разобраться что и как.
Это не для живого проекта, а для себя, что-бы смотреть как, что делается.

[romy4]

очень хорошо это делается в консоли js дебаггера (нажать F12, внизу строчка). вписываете туда код и смотрите

Answer 1

[Виталий Инчин ☢]

Обязательно изучите!: learn.javascript.ru/document

var button = document.querySelector(".button"),
      ball = document.querySelector(".ball").style;

button.onclick = function(){
   ball.left = parseFloat(ball.left) + 20 + "px";
}

Comments

[colorkid]

большое спасибо.

Answer 2

[Artem Arsenowitch]

Прости времени нет больше написать, работа, после отпишу

<div class="ball"></div>
<div class="button" onclick="moveBall()"></div>

function moveBall() {
var ball = document.getElementsByClassName("ball")[0];
ball.style.left = 200;
}

Comments

[Artem Arsenowitch]

Но этот код при клике просто запишет в left 200, после работы отпишу побробней

Answer 3

[L0k1]

если вы только начали - то покажите код, в котором что-то не получается - и вам сразу покажут где ошибка.
или у вас вообще нет представления о js - и вам нужно с 0 написать?