document.getElementById("foo").onclick

Why doesn't this work? It really been bugging me

<script type="text/javascript">
document.getElementById("foo").onclick = function(){
	alert("Hello world!");
}
</script>
<input id="foo" value="Click Me!" type="button" />

HTML:

Reference: http://adactio.com/articles/1112/

The error received is: document.getElementById("foo") has no properties

EDIT:

Solved:

window.onload = prepareButton;

function prepareButton()
{
	document.getElementById('foo').onclick = function()
	{
		alert('you clicked me!');
	}
}

PHP:

I'd appreciate any input or suggestions.

 

This should work (reverse order ) .
You can not use the element before it is defined

<input id="foo" value="Click Me!" type="button" />
<script type="text/javascript">
document.getElementById("foo").onclick = function(){
alert("Hello world!");
}
</script>

 

Thanks bibel!

Very interesting actually. Will play around with it.

 

@MMJ For what it's worth, your solution would be better written thus:

var prepareButton = function () {
    document.getElementById('foo').onclick = function() {
        alert('you clicked me!');
    }
};

window.onload = prepareButton;

Code (JavaScript):

Even though the result is the same, it's a best practice (according to most JavaScript gurus) to use function definitions instead of function declarations.

 

An element has to exist on the DOM before you can target it with scripting. In the first example your script is before the element in the markup so the INPUT doesn't even exist yet!

Waiting for onload is a waste of time, I actually advise AGAINST that if you can avoid it since it leaves a pretty big window for users to start doing things before the script is ready -- and there's NO reason to do it with something like a onclick handler for a DOM element.

HOWEVER, attaching via onclick is a bad idea just since other scripts may also be trying to target it, which is why we have the ability to attach event handlers in both the modern and dated ways of doing it... hence I'd use this helper function:

function eventAdd(e, eventName, handler) {
	if (e.addEventListener) e.addEventListener(eventName, handler, false);
		else e.attachEvent('on' + eventName, handler);
}

Code (markup):

Using that means no risk of conflicts with other scripts as they can all have their events fire like a chain.

Usually I like to load my scripts right before </body> -- it means that the DOM is completely formed so you can manipulate away...

<input id="foo" value="Click Me!" type="button" />

<script type="text/javascript"><!--

	/*
		place this script right before </body>
		or even BETTER put it in an external file where it BELONGS
	*/

	function eventAdd(e, eventName, handler) {
		if (e.addEventListener) e.addEventListener(eventName, handler, false);
			else e.attachEvent('on' + eventName, handler);
	}
	
	eventAdd(
		document.getElementById('foo'),
		'click',
		function() { alert('Hello World!');	}
	);

--></script>

Code (markup):

Any way you look at it though, if the script is going to run and target an element, it has to do so AFTER the element is declared in the markup, otherwise it doesn't exist yet. You can do this by moving the script after the element, or by wasting time waiting for onload.