CODEWITHSUNDEEP
javascripthtmlcss
Kai Aragaki
Kai Aragaki

Reputation: 437

Changing an element's position incrementally using JavaScript

I've just been getting into Javascript, starting with the "dive into a project" approach. My goal right now is to simply get a div element to move to the left by 10px, incrementally, for every mouseover. Here's what I have so far:

HTML

<div id="test"></div>

CSS

div {
    position:relative;
    width:30%;
    border:1px solid blue;
    height:50px;
}

JavaScript

document.getElementById("test").onmouseover = function() {mouseOver()};
function mouseOver() {
    document.getElementById("test").style.left = "10px";
}

JSFiddle

I understand why this doesn't work - however, I'm not positive how to get it to work, and I'm not positive what search queries I should be using.

Thank you for your time.

Upvotes: 2

Views: 660

Answers (2)

code
code

Reputation: 1137

You should increment to each function call

document.getElementById("test").onmouseover = function() {mouseOver()};
var increment = 10;
function mouseOver() {
    document.getElementById("test").style.left = increment + "px";
    increment += 10;
    alert(increment);
}

Upvotes: 2

Ekansh Rastogi
Ekansh Rastogi

Reputation: 2526

What you are missing is, you are not incrementing the value of left property of the element

try this https://jsfiddle.net/mdb6yt4z/1/

var left = 10;
document.getElementById("test").onmouseover = function() {mouseOver()};

function mouseOver() {
    console.log(document.getElementById("test").style.left);
    document.getElementById("test").style.left = left+"px";
    left+=10;
}

Upvotes: 5

Related Questions