JavaScript - Reposition a DIV incrementally onClick

Question

Very simple code, very simple problem. When a link is pressed, it moves a div either up or down. However, I cannot get it to move incrementally. I know this is a simple syntax error, but google isn't revealing the error of my ways. Anyone willing to enlighten me?

<a class="galsel" onclick="document.getElementById('innerscroll').style.bottom -='167px';">&laquo;</a>

<a class="galsel" onclick="document.getElementById('innerscroll').style.bottom +='167px';">&raquo;</a>

I already have it so that the div tiles itself vertically, so I'm not worried about it going "too high" or "too low"

Here's what it looks like right now: drainteractive.com/FBD/projects.php

Answer 1

You have to parse the value from the string containing px

// Increase by 167
document.getElementById('innerscroll').style.bottom = (parseInt(document.getElementById('innerscroll').style.bottom, 10) + 167) + ' px'

// Decrease by 167
document.getElementById('innerscroll').style.bottom = (parseInt(document.getElementById('innerscroll').style.bottom, 10) - 167) + ' px'

// Abstracted
function addToBottom(el, amount) {
   // You probably add lower and upper bound check conditions
   el.style.bottom = (parseInt(el.style.bottom) + amount) + ' px';
}

var el = document.getElementById('innerscroll');
addToBottom(el, 167);
addToBottom(el, -167);

Also be sure to make it work for cases where bottom wasn't set initially

var currentBottom = parseInt(document.getElementById('innerscroll').style.bottom) || 0;

Answer 2

+='167px' will concatinate it an it will become '167px167px167px167px167px' . Not sure what will result -='167px' , but probably will result an error.

Answer 3

You need to rip the 'px' off the string, convert(?) it to an int, then subtract from that.

onclick="var mElem = document.getElementById('innerScroll'); mCur = parseInt(mElem.style.bottom.replace('px', 0)); mElem.style.bottom = (mCur-167)+'px'"

Naturally, this should all be put into a separate function, who is then called in the onclick, rather than the monstrosity above.

function moveUp()
{
var mElem = document.getElementById('innerScroll'); 
var mCur = parseInt(mElem.style.bottom.replace('px', 0)); 
mElem.style.bottom = (mCur-167)+'px';
}

...

<strike>onlick="moveUp()"</strike>
onclick="moveUp()"

My mind must have been somewhere else..