[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 313
  • Last Modified:

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="showclick(xxx.html);">This is Link #1</a>
<br>
<a href="yyy.html" OnClick="showclick(yyy.html);">This is Link #2</a>
<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);">This is Link #3</a>

</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

0
sleepybear
Asked:
sleepybear
  • 4
  • 2
  • 2
1 Solution
 
justinbilligCommented:
<script>
      function AttachEvents( )
      {
            // Variables
            var intIndex = 0;
            var aobjLinks = document.getElementsByTagName( "A" );

            // 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="http://www.experts-exchange.com">EE</a>            
      </body>
</html>
0
 
sleepybearAuthor Commented:
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!


0
 
Michel PlungjanIT ExpertCommented:
<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; }
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
sleepybearAuthor Commented:
Hmm. I couldn't get mplungjan's idea to work as is.
I'm not sure why not, but I never got an alert.
0
 
justinbilligCommented:
<script>
      window.onload=AttachEvents;

     function AttachEvents( )
     {
          // Variables
          var intIndex = 0;
          var aobjLinks = document.getElementsByTagName( "A" );

          // 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>
          <a href="http://www.google.com">Google</a>
          <a href="http://www.yahoo.com">Yahoo</a>
          <a href="http://www.experts-exchange.com">EE</a>          
     </body>
</html>
0
 
sleepybearAuthor Commented:
Thanks for a superfast answer!
0
 
sleepybearAuthor Commented:
Would you please have a look at this one too?

http://experts-exchange.com/Web/Web_Languages/JavaScript/Q_21415543.html

Thanks,
SB
0
 
Michel PlungjanIT ExpertCommented:
for (i=0, n=lnks.length;i++) {
should be
 for (i=0, n=lnks.length;i<n;i++) {

sorry
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now