1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 3:45 pm May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Converting from embedded to external JavaScript problem with the

"this keyword?"

         

MarcMiller

5:50 am on Nov 17, 2006 (gmt 0)

10+ Year Member



Hi
some one gave me the script below which is almost exactly what I want if I could only converted to an external JavaScript file. The closest I have been able to come to doing this is to explicitly put the URL address fully written out between quotation marks where the variable name "URL" (in the below function) is passed the URL value just by using the"this.href" in the function call. I made several attempts to do this so I sure would appreciate some help. My reason for this want is this script is to be used twice on 27 pages.

Very sincerely
Marc 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>delay</title>
<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="txt/javascript">
<script type="text/javascript">
function goURL(url){
setTimeout(function(){window.location.href=url},100)
}
</script>
</head>
<body>
<a href="http://www.google.com" 
onclick="goURL(this.href);return false">
  mylink
</a>
</body>
</html>

daveVk

12:20 pm on Nov 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It may help if you post what you have converted it into. I take it you wish to change this bit onclick="goURL(this.href);return false" as well as externalize the javascript?

penders

12:45 pm on Nov 17, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You could try changing the line from: 

setTimeout(function(){window.location.href=url},100)

To: 

setTimeout('window.location.href="' + url + '"',100);

But I think this might be syntactically the same?

MarcMiller

10:22 pm on Nov 17, 2006 (gmt 0)

10+ Year Member



OK - if I just move the script between the tags and not the event handler it works. Here's that code with the delay changed to 10 seconds so you may see it work in a browser.

HTML 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>delay linked js</title>
<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="txt/javascript">
<script src="mylinkDelayLinked.js" type="text/javascript">
</head>
<body>
<a href="http://www.google.com" 
onclick="goURL(this.href);return false">
 mylink 
</a>
</body>
</html>

JavaScript 

function goURL(url){
setTimeout(function(){window.location.href=url},10000)
}

However my three attempts at moving both the function and event handler to externally linked JavaScript failed see my three attempts below.

JavaScript attempt one 


function goURL(url){
setTimeout(function(){window.location.href=url},10000)
};
function onclickThis(x) {
onclick="goURL(x)";
return false;
};
widows.onload () {
document.getElementById("mylinkID").onclick.onclickThis(this.href);
}

JavaScript attempt two 

function goURL(url){
setTimeout(function(){window.location.href=url},10000)
};
function onclickThis(x) {
onclick="goURL(x)";
return false;
};
widows.onload () {
document.getElementById("mylinkID")onclick=onclickThis(this.href);
}

JavaScript attempt two 

function goURL(url){
setTimeout(function(){window.location.href=url},10000)
};
function onclickThis(x) {
onclick="goURL(x)";
return false;
};
widows.onload () {
document.getElementById("mylinkID")onclick=onclickThis(this.href);
}

JavaScript attempt thee 

function goURL(url){
setTimeout(function(){window.location.href=url},10000)
};
function onclickThis(x) {
window.location = this.href;
onclick="goURL(x)";
return false;
};
widows.onload () {
document.getElementById("mylinkID")onclick=onclickThis;
}

So I guess my question really is how to move the event handler to external JS and use "this.href" to pass the URL same as he internal JavaScript. I think if I could learn this it would really help my ability to learn more and more JavaScript. So your further help would be greatly appreciated.

Sincerely
Marc

daveVk

3:05 am on Nov 18, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Keep original javascript for goURL.

onclick="goURL(this.href);return false"

translates to

function fix() {
var el = document.getElementById("mylinkID");
el.onclick = 'goURL("' + el.href + '");return false';
}

may be ok to use window.onload ( not widows.onload (sic) ) I would use

<body onload="fix()" >

MarcMiller

7:18 am on Nov 18, 2006 (gmt 0)

10+ Year Member



OK
the instructions given to me directly above sounded really good so I try to follow it religiously. I see where I have made some errors in some of the code I posted two posts above. So the code that should work is directly below. But it doesn't work. I hope I am faithfully carrying out the instructions so please tell me if I am.

html 


<html>
<head>
<title>loction delay almost linked</title>
<title>delay linked js</title>
<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="txt/javascript">
<script src="locationDelayAllMostLinked.js" type="text/javascript"> 
</head>
<body onload="fix()">
<a href="http://www.google.com" id="mylinkID">
mylink
</a> 
</body>
</html>

javaScript 


function goURL(url){
setTimeout(function(){window.location.href=url},10000)
}; 
function fix() {
var el = document.getElementById("mylinkID");
el.onclick = 'goURL("' + el.href + '");return false';
};

just to reiterate what I am trying to do is create some code which changed the normal operation of an HTML page from one that immediately goes to the links clicked on to one that goes to these links after a delay chosen by me. Some code that works but is of the form of embedded JavaScript is shown below. And I am trying to convert this to a purely external JavaScript. I should also point out a noteworthy feature of the code below is it degrades gracefully to normal HTML link operation if JavaScript is turned off. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>delay</title>
<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="txt/javascript">
<script type="text/javascript">
function goURL(url){
setTimeout(function(){window.location.href=url},100)
}
</script>
</head>
<body>
<a href="http://www.google.com"
onclick="goURL(this.href);return false">
mylink
</a>
</body>
</html>

sincerely
Marc

daveVk

11:37 am on Nov 18, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sorry replace

el.onclick = 'goURL("' + el.href + '");return false';

with

el.onclick = function(){goURL(this.href);return false;};

RonPK

4:15 pm on Nov 18, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



<script src="locationDelayAllMostLinked.js" type="text/javascript">

You forgot the closing tag, 

</script>

MarcMiller

10:17 pm on Nov 18, 2006 (gmt 0)

10+ Year Member



Sorry to be a nag, but you stucked with me this far perhaps you could stick with me until its conclusion and I get this script working. What follows is the changes I have made according to the last two posts directly above. This script is still not working that's why I am putting it here again for your cutting and pasting pleasure should that be necessary for you to help me.
Very sincerely
Marc

HTML 


<html>
<head>
<title>loction delay almost linked</title>
<title>delay linked js</title>
<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="txt/javascript">
<script src="locationDelayAllMostLinked.js" type="text/javascript">
</script> 
</head>
<body onload="fix()">
<a href="#" id="mylinkID">
mylink
</a> 
</body>
</html>

javascript 

function goURL(url){
setTimeout(function(){window.location.href=url},10000)
};
function fix() {
var el = document.getElementById("mylinkID");
el.onclick = function(){goURL(this.href);return false;}; 
};

daveVk

11:01 pm on Nov 18, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



with full url ( inc http:// ) here

<a href="#" id="mylinkID">

eg

<a href="http://www.google.com" id="mylinkID">

works fine?

MarcMiller

6:07 am on Nov 19, 2006 (gmt 0)

10+ Year Member



Thanks a lot. That was awful stupid of me. Well it works! I do have another question in regard to the code. I have been told in a onload event in external file, and proved it to myself coding experiments Shown above, you cannot invoke a function this way. 

window.onload = function () {
document.getElementById("someID").onclick=someFunctionName("SomeParameterToPass");
}

Yet you were able to pass parameters to a function this way. 

el.onclick = function(){goURL(this.href);return false;};

so does that mean that code like this is good? 

window.onload = function () {
document.getElementById("someID").onclick=function(){ someFunctionName ("SomeParameterToPass");};
}

And if that is the case that that's good coding than is that the trick to passing parameters, in external JavaScript, from event handlers to functions you want to invoke?
Does anybody have a good link that explains this passing of parameters, in external JavaScript, from event handlers?

My sincere thanks
Marc

daveVk

11:46 am on Nov 19, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



onclick = someFunctionName;
or
onclick = function () { ... }
are valid

onclick = someFunctionName( ... );
is invalid as RHS can not be an expression

So you are correct, the 1st window.onload is bad and the 2nd Ok.

As for passing parameters, parameters into the onclick function are not under our control. within this function we can refer to literals, "this", and global variables (properties of window) are fine, but dont do this

function xx() {
var fred = 12;
something.onclick = function () ( ... fred ... };
}

if you realy realy need parameters look at currying if you dare [webmasterworld.com...]

penders

1:11 pm on Nov 19, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Just a minor improvement to your now working example... (which you may now be doing having mentioned the window.onload event?)... in order to remove all JS and event handlers from your HTML....

Instead of having the event handler on the body element in your HTML... 

<body onload="fix()">

You could have it in your external JS file... 

window.onload = fix; // NB: No '()'

And leave your <body> element empty.

If you wanted to attach more than one function to the window.onload event then you could do something like.... 

window.onload = function() { 
 fix(); 
 secondFunction(); 
 thirdFunction(); 
}

Effectively assigning 1 function that calls all the others.

MarcMiller

8:38 pm on Nov 19, 2006 (gmt 0)

10+ Year Member



Thank you for those further responses. And yes the "fix ()" function shall be one of many functions invoked in a "onload.window (){...}" function. And we'll also include some sound evoking script which is the whole purpose of pursuing how to create a short delay before going to a location. It seems browsers will not permit you to play a sound simultaneously to moving to a new location. So intend for this script is to use it to help play a small low volume clicking sound when you click on graphic buttons which will say next and prev on them.
Thanks again
Marc
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 3:45 pm May 14, 2026