Q:

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.

A:

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;
}

