i'm running out of memmory at line 23, or the function
executes only once, (even if i call it several times), so
there isprobably a bug in the function causing the script
to halt.
javascript was the first language i learned years back,
and i've been coding php mostly since, so i might have
the wrong syntax.
all i'm trying to do is call goLeft(), and have it call itself
several times using setTimeOut() until the variable left is
no longer less than 50. which should animate the box
by moving it to the right 5px every 500milliseconds.
it's probably a very simple fix but i just can't recall.
help me out please.
lol, i know i can use jquery animate, but i'm doing a
live javascript course and learning to manually manipulate
the dom without using jquery.
it worked fine before encapsulating the code into a function
and just using setInterval(), so i dunno what went wrong.
thanks
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Accessing-Dom-Nodes</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper600">
<h1>DOM Scripting - Javascript and CSS not jQuery</h1>
<div id="leftPos">0</div>
<div id="box" style="position:relative;border:1px dashed orange;width:50px;height:50px;"></div>
</div>
<script type="text/javascript">
var leftPos = document.getElementById("leftPos");
var box = document.getElementById("box");
function goLeft(){
left = 0;
if( left < 50 ){
left += 5;
leftPos.innerHTML=left;
box.style.left=left+'px';
setTimeOut(goLeft(),500);
}
}
goLeft();
</script>
</body>
</html>
i modified it to this but still getting 'out of memory at line:23'.
should i call the function from within itself, or just in the body
of the page? or should i just call setTimeOut(goLeft(),500) once
outside of the function?
it should call itself recursively a couple times as it makes the
box move across the screen every half second.
i'm either getting the memory error or it only calls itself once
and terminates. i understand what your hinting at, but not
sure how to code it to work, can you adjust my code so
i can see what i'm still doing wrong?
thanks for helping
Code:
<script type="text/javascript">
var leftPos = document.getElementById("leftPos");
var box = document.getElementById("box");
function goLeft(){
left = 0;
if( left < 50 ){
left += 5;
leftPos.innerHTML=left;
box.style.left=left+'px';
setTimeOut(goLeft(),500);
}
}
setTimeOut(goLeft(),500);
</script>
setTimeout was in the wrong case and 'left' cannot be within the function.
There are better ways of doing this.
i know, i know, we have jquery now, but i like to learn the nuts and bolts, i modified and it works now.
thanks a bunch.
working code:
note: i pulled out the 'time' var and renamed it 'interval'
Code:
<script type="text/javascript">
var leftPos = document.getElementById("leftPos");
var box = document.getElementById("box");
var left = 0;
var interval = 150;
function goLeft(){
if( left < 50 ){
left += 5;
leftPos.innerHTML=left;
box.style.left=left;//+'px';
setTimeout("goLeft()",interval);
}
}
goLeft();
</script>
it is really strange to hear that this code works while you have this line
box.style.left=left;//+'px';
in it
lol it works with or without it, but then again i'm only using IE at the moment, i actually expected it only to work when i the script adds the pixels, but it works without it at least in IE, i'll remove the comment so it will be proper i just kinda forgot since it was working, lol.
i'd normally just use jquery animate() but i'm learning event handling and dom scripting via a live course at the moment so i'm avoiding jquery in order to learn the manual way.
setTimeout issue
Reply With Quote
Originally Posted by Sterling Isfine
Bookmarks