I've created a script for an interactive "reel" that moves up or down when clicking on specific arrow buttons. However, I'm encountering two issues:
1) The up arrow causes it to move downward, while the down arrow moves it upward.
2) After executing once, I'm unable to trigger it again as an error occurs stating it couldn't parse "top".
Any insights on why this might be occurring? I've included all the code below, even though it's not the most organized.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tales of the Hartland: Homepage</title>
<style type="text/css">
/* ID DEFINITIONS */
#reelHolder {
height: 750px;
width: 800px;
overflow: hidden;
border: 1px solid gray;
position: relative;
left:50%;
margin-left:-400px;
}
#arrowDown {
z-index:auto;
position:relative;
left:87.4%;
}
#arrowUp {
z-index:auto;
position:relative;
}
#reel {
position: relative;
}
/* CLASS DEFINITIONS */
.banner {
position: relative;
left:50%;
margin-left:-600px;
}
.arrow {
width:50px;
height:50px;
}
.reeler {
width: 600px;
height:300px;
position: relative;
left:50%;
margin-left:-300px;
margin-top:50px;
}
.break {
height:0px;
}
.bigBreak {
height:50px;
}
</style>
<script>
// REEL UP
function reelUp(elem) {
elem = document.getElementById(elem);
var down = 0;
var curLoc = elem.style.top;
function frame() {
down++;
elem.style.top = down + curLoc + 'px';
if (down == 300)
clearInterval(id);
}
var id = setInterval(frame, 10); // draw every 10ms
}
// REEL DOWN
function reelDown(elem) {
elem = document.getElementById(elem);
var down = 0;
var curLoc = elem.style.top;
function frame() {
down++;
elem.style.top = (-1 * down) + curLoc + 'px';
if (down == 300)
clearInterval(id);
}
var id = setInterval(frame, 10); // draw every 10ms
}
</script>
</head>
<body>
<img src="Banner.png" width="1200" height="150" alt="" class="banner"/>
<a id="arrowUp" class="arrow" href="javascript:reelUp('reel')">
<img src="arrowUp.png" alt=""/>
</a>
<a id="arrowDown" class="arrow" href="javascript:reelDown('reel')">
<img src="arrowDown.png" alt=""/>
</a>
<div id="reelHolder" class="centerDiv">
<div id="reel">
<img src="reel1.png" class="reeler" id="reel1"/>
<div class="break"></div>
<img src="reel2.png" class="reeler" id="reel2"/>
</div>
</div>
</body>
</html>