javascript - 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

您必须从包含的字符串中解析值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);

还要确保它适用于最初未设置底部的情况

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

Answer 2

+='167px'将连接它，它会变成'167px167px167px167px167px'. 不确定会产生什么结果-='167px'，但可能会导致错误。

Answer 3

您需要从字符串中撕下“px”，将其转换（？）为 int，然后从中减去。

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

自然，这都应该放在一个单独的函数中，然后在 onclick 中调用该函数，而不是上面的怪物。

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()"

我的心一定在别的地方。。