sleepybear
asked on
Insert onClick on all <a> tags dynamically
Ummm. Should have had more coffee. I meant "onClick" in the title, not
onMouseOver, and I can't figure out how to edit it.
What I'm trying to do is append an onClick to every <a> tag on a page,
and have that OnClick call a function related to the destination URL of
that <a> tag.
For example, if the original HTML looks like this...
==========================
<html><body>
<script>
// script goes here
// function showclick(urldestination){
// alert (urldestination);
// }
</script>
<a href="xxx.html">This is Link #1</a>
<br>
<a href="yyy.html">This is Link #2</a>
<br>
<a href="http://www.SomeExternalWebsite.com/weirdurl.php?x=2&y=3">This is Link #3</a>
</body></html>
==========================
I would like my script (probably called in as an include) to convert the HTML to this...
==========================
<html><body>
<script>
// script goes here
// function showclick(urldestination){
// alert (urldestination);
// }
</script>
<a href="xxx.html"OnClick="sh
<br>
<a href="yyy.html" OnClick="showclick(yyy.htm
<br>
<a href="http://www.SomeExternalWebsite.com/weirdurl.php?x=2&y=3" OnClick="showclick(http://www.SomeExternalWebsite.com/weirdurl.php?x=2&y=3);">Thi
</body></html>
==========================
I suspect that the destination in the OnClick may have to be escaped so
that it's passed to the function, but I'm not sure how to do all that.
Also, I don't actually want to stop the navigational aspect of the clicking.
In other words, if someone clicks the link, I want them to be able to go
to their destination page, I just want to open an alert beforehand.
Thanking you for your help in advance,
SleepyBear
onMouseOver, and I can't figure out how to edit it.
What I'm trying to do is append an onClick to every <a> tag on a page,
and have that OnClick call a function related to the destination URL of
that <a> tag.
For example, if the original HTML looks like this...
==========================
<html><body>
<script>
// script goes here
// function showclick(urldestination){
// alert (urldestination);
// }
</script>
<a href="xxx.html">This is Link #1</a>
<br>
<a href="yyy.html">This is Link #2</a>
<br>
<a href="http://www.SomeExternalWebsite.com/weirdurl.php?x=2&y=3">This is Link #3</a>
</body></html>
==========================
I would like my script (probably called in as an include) to convert the HTML to this...
==========================
<html><body>
<script>
// script goes here
// function showclick(urldestination){
// alert (urldestination);
// }
</script>
<a href="xxx.html"OnClick="sh
<br>
<a href="yyy.html" OnClick="showclick(yyy.htm
<br>
<a href="http://www.SomeExternalWebsite.com/weirdurl.php?x=2&y=3" OnClick="showclick(http://www.SomeExternalWebsite.com/weirdurl.php?x=2&y=3);">Thi
</body></html>
==========================
I suspect that the destination in the OnClick may have to be escaped so
that it's passed to the function, but I'm not sure how to do all that.
Also, I don't actually want to stop the navigational aspect of the clicking.
In other words, if someone clicks the link, I want them to be able to go
to their destination page, I just want to open an alert beforehand.
Thanking you for your help in advance,
SleepyBear
ASKER
Great. Thanks! That works perfectly.
Unfortunately, I don't have access to the <body> tag to do the onload, or
the ability to insert a script BEFORE the <body> tag. Is there
any way to do the above INSIDE the space that is accessible by me as
in my example above?
Thanks!
Unfortunately, I don't have access to the <body> tag to do the onload, or
the ability to insert a script BEFORE the <body> tag. Is there
any way to do the above INSIDE the space that is accessible by me as
in my example above?
Thanks!
<script>
// script goes here
function changeClicks() {
lnks = document.links;
for (i=0, n=lnks.length;i++) {
lnks[i].onclick=showclick;
}
}
function showclick(){
alert (this.href);
}
window.onload=changeClicks
</script>
which will not create x new functions and will work on older browsers too.
If you need to add to an existing body onLoad you will need to do something like
window.onload=function() {changeClicks(); window.onload; }
// script goes here
function changeClicks() {
lnks = document.links;
for (i=0, n=lnks.length;i++) {
lnks[i].onclick=showclick;
}
}
function showclick(){
alert (this.href);
}
window.onload=changeClicks
</script>
which will not create x new functions and will work on older browsers too.
If you need to add to an existing body onLoad you will need to do something like
window.onload=function() {changeClicks(); window.onload; }
ASKER
Hmm. I couldn't get mplungjan's idea to work as is.
I'm not sure why not, but I never got an alert.
I'm not sure why not, but I never got an alert.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for a superfast answer!
ASKER
Would you please have a look at this one too?
https://www.experts-exchange.com/questions/21415543/Followup-to-OnClick-event-question.html
Thanks,
SB
https://www.experts-exchange.com/questions/21415543/Followup-to-OnClick-event-question.html
Thanks,
SB
for (i=0, n=lnks.length;i++) {
should be
for (i=0, n=lnks.length;i<n;i++) {
sorry
should be
for (i=0, n=lnks.length;i<n;i++) {
sorry
function AttachEvents( )
{
// Variables
var intIndex = 0;
var aobjLinks = document.getElementsByTagN
// Loop through links
for( intIndex = 0; intIndex < aobjLinks.length; intIndex++ )
{
aobjLinks[ intIndex ].onclick= function( ){ AlertURL( this.href ) };
}
}
function AlertURL( strURL )
{
alert( strURL );
}
</script>
<html>
<body onload="AttachEvents( );">
<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="https://www.experts-exchange.com">EE</a>
</body>
</html>