Onclick not working

JavaScript
1

whenever I use onclick in javascript (not with onclick attribute in html) it doesn’t work. I’ve never been able to get it to work… ever!

here is the code I’m using


el = document.getElementById("foo");
el.onclick = function () { return false; };

am I doing something wrong?

HELP!!!

2

Try this:


var el = document.getElementById("foo").OnClick = function(){
//code
}
window.onload = el
3

i get this error in ie:

‘document.getElementById(…)’ is null or not an object

the id I defined is definitely an object

4

What element is “foo”? Some objects don’t support the OnClick event. Buttons/Links do, but <Spans> don’t, in IE.

5

Hmm, can’t see the problem immediately… If it’s the case that you wrote the function apart like this:

el.onclick = myFunction;

function myFunction() {
... ;
}

In that case your function needs to be read out before you call it:


function myFunction() {
... ;
}

el.onclick = myFunction;
6

[QUOTE=bulevardi;4549098]Hmm, can’t see the problem immediately… If it’s the case that you wrote the function apart like this:

el.onclick = myFunction;

function myFunction() {
... ;
}

I’m afraid that you’re mistaken when it comes to thinking that the above won’t work.

It’s not considered to be a good idea to write code in the above fashion, but it will still work.

Why?

Whenever JavaScript enters a new scope, it scans through for any function declarations and sets those up first before setting up variables, and then proceeding with execution of the code.

… Inner function definitions are used to create function objects which are assigned to properties of the Variable object with names that correspond to the function name used in the function declaration. The last stage of variable instantiation is to create named properties of the Variable object that correspond with all the local variables declared within the function.

For more on this read The Execution Context

7

That should work. The most common reason why code like this doesn’t work as intended is that the JavaScript is placed and executed before the HTML element you’re trying to add an event handler for.

The simplest way is to place the script code just before the </body> end tag, when you know the entire DOM tree has been constructed.

If that’s not possible, and you’re forced to have the script in the <head>, you can use something like this,

window.onload = function () {
    document.getElementById("foo").onclick = function () {return false;};
};
8

thank you, thank you, thank you, thank you!

finally it worked here is the ending code:


function onLoad() {
    document.getElementById("foo").onclick = function () { return false; }
}

and i put the onLoad function in the onload body attribute:


<body onload="onLoad()">

and it works!

Thank You again!

9

Glad you got it working. On a side note, you really should separate your behavior (Javascript) from your markup (HTML). So, if JS isn’t supported, it will degrade gracefully. I would advise you put your JS into an external .js file.

10

You need to remember that JavaScript is case sensitive. There have been several references in this thread where onclick has been misspelt as onClick and doing that would also stop it working.

11

that’s what I was trying to achieve by removing the event handlers and I have my javascript in a separate .js file but for some reason when I use onload not on the body tag, it doesn’t work

12

Yeah I did notice that and I changed it but it didn’t make a difference.