Javascript code that reads if a link has been clicked

**jelly46** · Nov 22, 2012 06:16

Javascript code that reads if a link has been clicked

I have a simple bit of code (contained in a CMS and cant be edited) that and needs to be read by Javascript in the header if it has been clicked.

Here is the code:

HTML Code:

<div id="example" class="page-element-outer" style="text-align: left"><div class="page-element-inner" ><input type="image" name="Button1" id="Button" src="/getresource.axd?AssetID=16813" alt="Submit" style="text-align:left;" /></div></div>

Can you assist?

C

**Pullo** · Nov 22, 2012 06:28

You could attach an onclick event handler to make something happen when the button is clicked.
Is that what you mean?

**jelly46** · Nov 22, 2012 06:31

No i need to work on the Javascript in the header only. The button code is a plugin for a cms and i have no access to add anything to it. I only have the header and Javascript to work with.
Thanks mate

**Pullo** · Nov 22, 2012 06:32

How is the button being included?
Can you provide a link to the page in question?

**jelly46** · Nov 22, 2012 06:36

I'm afraid I cant as it is only on my dev box.
I can paste some code?

**Pullo** · Nov 22, 2012 06:37

Yeah, that's cool.
Go ahead.

**jelly46** · Nov 22, 2012 06:44

Cool, thanks alot mate
Here the JS i've developed:

Code JavaScript:

<script type="text/javascript">
document.getElementById("Button").addEventListener("click", callback, true);
 
function callback() {
   alert("clicked");
 
   return false;
}
</script>

and here the button code that i can't edit at all

Code HTML4Strict:

<div id="example" class="page-element-outer" style="text-align: left"><div class="page-element-inner" ><input type="image" name="Button1" id="Button" src="/getresource.axd?AssetID=16813" alt="Submit" style="text-align:left;" /></div></div>

**Pullo** · Nov 22, 2012 06:47

Hi,

Could you put code tags around the code, please. (Edit post - Go Advanced - Choose Syntax).
It makes it easier to read.

So, I'm not getting you. The code you posted looks fine to me.
What's not working?

**jelly46** · Nov 22, 2012 07:26

Oh OK
I thought it was wrong, and it may not work in IE

Code:

<script type="text/javascript">
document.getElementById("Button").addEventListener("click", callback, true);

function callback() {
   alert("clicked");

   return false;
}
</script>

Thanks Pullo

**Pullo** · Nov 22, 2012 07:44

Hi there,

Yup, my mistake, it was broken in IE 8 and below.
Try this, it should work in all browsers:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Onclick</title>
    <script type="text/javascript">
      window.onload = function(){
        document.getElementById("Button").onclick = function() {
          alert("clicked");
          return false;
        }
      }
    </script> 
  </head>
  
  <body>
    <div id="example" class="page-element-outer" style="text-align: left">
      <div class="page-element-inner" >
        <input type="image" name="Button1" id="Button" src="/getresource.axd?AssetID=16813" alt="Submit" style="text-align:left;" />
      </div>
    </div>
  </body>
</html>

Hope that helps.

**jelly46** · Nov 22, 2012 07:54

Thanks Pullo, thank you so much.

**Pullo** · Nov 22, 2012 07:57

Happy to help

**felgall** · Nov 22, 2012 14:50

Originally Posted by Pullo

Hi there,

Yup, my mistake, it was broken in IE 8 and below.
Try this, it should work in all browsers:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Onclick</title>
    <script type="text/javascript">
      window.onload = function(){
        document.getElementById("Button").onclick = function() {
          alert("clicked");
          return false;
        }
      }
    </script> 
  </head>
  
  <body>
    <div id="example" class="page-element-outer" style="text-align: left">
      <div class="page-element-inner" >
        <input type="image" name="Button1" id="Button" src="/getresource.axd?AssetID=16813" alt="Submit" style="text-align:left;" />
      </div>
    </div>
  </body>
</html>

Hope that helps.

You are inserting the JavaScript in the wrong place in the page and so need extra JavaScript to delay the script running until after the point where you should have attached the JavaScript. JavaScript should be attached immediately before the </body> tag. It should only ever go in the head if the code is testing whether to allow the current page to display or to load a different one without loading this one.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Onclick</title>
  </head>
  
  <body>
    <div id="example" class="page-element-outer" style="text-align: left">
      <div class="page-element-inner" >
        <input type="image" name="Button1" id="Button" src="/getresource.axd?AssetID=16813" alt="Submit" style="text-align:left;" />
      </div>
    </div>
    <script type="text/javascript">
        document.getElementById("Button").onclick = function() {
          alert("clicked");
          return false;
        }
    </script> 
  </body>
</html>

**Pullo** · Nov 22, 2012 14:54

Originally Posted by felgall

JavaScript should be attached immediately before the </body> tag.

This is true, but I figured the OP wanted it in the head for whatever reason.

Originally Posted by jelly46

... that and needs to be read by Javascript in the header if it has been clicked

**felgall** · Nov 22, 2012 19:19

Originally Posted by Pullo

This is true, but I figured the OP wanted it in the head for whatever reason.

Probably just copying all the JavaScript that was written for Netscape 2, 3 and 4 where the JavaScript mostly went in the head rather than working with more modern browsers such as IE5+ that work better with the JavaScript at the bottom of the body.

User Tag List

Thread: Javascript code that reads if a link has been clicked

Thread Tools

Display

Javascript code that reads if a link has been clicked

Bookmarks

Bookmarks

Posting Permissions