Forum Moderators: open
I'm a newbie to JavaScript, and would really appreciate some help on getting this to work:
function delayedURL(var1) {
alert(var1);
setTimeout("alert(var1)",1250);
}
<a href="javascript:delayedURL('http://www.example.com');">test</a>
Clicking on "test" results in the first alert being displayed correctly, then the second gives an error "variable var1 not defined".
But it is defined, as it's just been used in the first alert! I'm guessing it's a variable-scope issue?
Many thanks for any help!
[edited by: Fotiman at 1:32 pm (utc) on June 8, 2009]
[edit reason] Examplified URL [/edit]
this is how I would approach the problem...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><title></title>
<script type="text/javascript">
function init() {
document.getElementById('mylink').onclick=function(){
delayedURL(this);
return false;
}
}function delayedURL(var1) {
alert(var1);
temp=var1;
setTimeout('delayedURL(temp)',3000);
}if(window.addEventListener){
window.addEventListener('load',init,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',init);
}
}
</script></head>
<body><div>
<a id="mylink" href="http://www.example.com">test</a>
</div></body>
</html>
[edited by: Fotiman at 1:31 pm (utc) on June 8, 2009]
[edit reason] Examplified URL [/edit]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Some Title</title>
<script type="text/javascript">var foo; //an id for the setTimeout to stop it later
function delayedURL(var1) {
alert(var1);
foo = window.setTimeout(function () { delayedURL(var1); },4000);
return false;
}</script>
</head>
<body>
<div>
<a href="#" onclick="return delayedURL('http://www.example.com');">test</a>
 <a href="#" onclick="window.clearTimeout(foo); return false;">stop test</a>
</div>
</body>
</html>
[edited by: Fotiman at 1:30 pm (utc) on June 8, 2009]
[edit reason] Examplified URL [/edit]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Some Title</title>
<script type="text/javascript">
function delayedURL(var1) {
setTimeout(location.href=var1,4000);
return false;
}
</script>
</head>
<body>
<div>
<a href="#" onclick="return delayedURL('http://www.example.com');">test</a>
</div>
</body>
</html>
The above gives a syntax error then does the redirect, but not the delay :-(
[edited by: Fotiman at 1:30 pm (utc) on June 8, 2009]
[edit reason] Examplified URL [/edit]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Some Title</title>
<script type="text/javascript">
function delayedURL(var1) {
setTimeout(function(){location.href=var1;},4000);
return false;
}
</script>
</head>
<body>
<div>
<a href="http://www.example.com" onclick="return delayedURL(this.href);">test</a>
</div>
</body>
</html>
Note the following changes:
1. I corrected your link to include the real URL in the href. This will allow users with JavaScript disabled to use your link.
2. setTimeout takes a function as the first parameter, where you were trying to pass an assignment. Also, because it was an assignment, it executes as soon as it's encountered, which is why the redirect still happened, but then you're essentially passing the location.href where setTimeout is expecting a function. So I wrapped that assignment in an anonymous function. setTimeout executes the function 4 seconds later, which sets the location.href.
