I'm having some trouble in moving a div tag over with onclick. I can get it to move once but then I don't know how to get the new variable and add to it again.

NO jquery please and I'm not really worried about cross platforms at the moment

function addToMargin()  {

        var marginleft = 20;
        document.getElementById("show-sessions").style.marginLeft = marginleft + "px";
}

#show-sessions  {
        margin-left:10px;
        width:200px;
        overflow:hidden;
}

I tried setting a global variable to store the number in but then it became a NaN

any help greatly appreciated...

I'm having some trouble in moving a div tag over with onclick. I can get it to move once but then I don't know how to get the new variable and add to it again.

NO jquery please and I'm not really worried about cross platforms at the moment

function addToMargin()  {

        var marginleft = 20;
        document.getElementById("show-sessions").style.marginLeft = marginleft + "px";
}

#show-sessions  {
        margin-left:10px;
        width:200px;
        overflow:hidden;
}

I tried setting a global variable to store the number in but then it became a NaN

any help greatly appreciated...

• javascript
• attributes
• styles
• increment

• I hope you understand that the margin will be 20 and not 30 because javascript canot read the css style like this. – kingdomcreation Commented Mar 5, 2013 at 19:04

6 Answers 6

function addToMargin()  {  
        var marginleft 
            = parseInt(document.getElementById("show-sessions").style.marginLeft) + 20;
        document.getElementById("show-sessions").style.marginLeft = marginleft + "px";
}

The golobal variable thing wasn't a bad idea, try something like this:

var margin = 20;
function addToMargin()  {
        margin ++; //or += value
        document.getElementById("show-sessions").style.marginLeft = margin + "px";
}

I'd also probably provide the initial margin as an inline style, just in case...

function addToMargin(value)  {
    var element = document.getElementById("show-sessions");
    var marginleft = parseInt(element.style.marginLeft.replace('px', ''));
    element.style.marginLeft = (marginleft + value) + "px";
}

My contribution for future reference and research:

function addToLeft()  {  
    var left 
        = document.getElementById("show-sessions").clientLeft + 20;
    document.getElementById("show-sessions").style.Left = left + "px";

}

note1: this changes the left position, not the marginleft.

note2: the returning value is int not string.

Your variable marginLeft will remain 20 and that's why it's moving once. Are you not perhaps trying to achieve something like this:

var marginLeft = 20;
var tot = document.getElementById("show-sessions").style.marginLeft;
document.getElementById("show-sessions").style.marginLeft = (tot + marginLeft) + "px"

You could use the window.getComputedStyle() method. And maybe make a reusable function for better abstraction. Something like:

function move(el, val) {
    var style = window.getComputedStyle(el);
    el.style.marginLeft = parseInt(style.marginLeft) + val + "px";
}

window.onload = function () {
    document.getElementById("show-sessions").onclick = function (e) {
        move(this, 20);
    };
};

Example on JSFiddle.