Javascript code that reads if a link has been clicked

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:

<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

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

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

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

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

Yeah, that’s cool.
Go ahead.

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

<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

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

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?

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


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

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

   return false;
}
</script>

Thanks Pullo

Hi there,

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

<!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.

Thanks Pullo, thank you so much.

Happy to help :slight_smile:

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.

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

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.