0

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?

Anders R. Bystrup
  • 14,996
  • 10
  • 58
  • 53
jelly46
  • 243
  • 3
  • 14
  • I couldn't understand the question ! , could u add more details plz – Mahmoud Farahat Nov 22 '12 at 10:48
  • 1
    What do you mean "reads if a link has been clicked"? Do you mean that you want a piece of JS code to run when the user clicks the link, that is, in response to the click? – nnnnnn Nov 22 '12 at 10:48

1 Answers1

1

You can select the element through its ID and attach a click-event listener using the addEventListener method.

document.getElementById("Button").addEventListener("click", callback, true);

function callback() {
   // Do some stuff in here when clicked
   alert("clicked");

   // Return false to prevent the browser default 
   // click-behaviour, if that is desired
   return false;
}

For legacy browsers

Older versions of IE doesn't support addEventListener, so for those you might need to do something like this:

var el = document.getElementById("Button");
if (el.addEventListener) {
  el.addEventListener('click', callback, false); 
} else if (el.attachEvent)  {
  el.attachEvent('onclick', callback);
}

Wait for the DOM to be ready

If you plan to run this in the head of your page, you'll need to wrap it a DOM-ready event listener as well, otherwise there is a change that the click event isn't attached to the element, as that element doesn't exist in the DOM when your script is run.

Christofer Eliasson
  • 29,772
  • 6
  • 69
  • 99
  • Thanks for this Christofer but can you give me an expample re the DOM-ready event listener. Sorry but Javascript is not my strongest skill. – jelly46 Nov 22 '12 at 12:00
  • @jelly46 Would it be possible for you to add the JavaScript at the bottom of your body-element instead of within your head. In that case you wouldn't need the DOM-ready callback. The problem is that a DOM-ready callback is quite extensive if you want cross-browser support. See [this SO question](http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery). – Christofer Eliasson Nov 22 '12 at 12:10
  • to be honest, i dont know. I have been expressly told to put the JS in the header – jelly46 Nov 22 '12 at 12:42
  • @jelly46 All right, I would tell them that it would save a lot of trouble to put it at the end of the body instead, but if that doesn't bite, you would have to use something like what's being discussed in the question i linked to. – Christofer Eliasson Nov 22 '12 at 12:47
  • Thanks for this Christofer but it's getting too complex for me at the moment. – jelly46 Nov 22 '12 at 13:39