empty div not getting recognised in javscript

Question

i am creating an empty div in the javacript DOM. but when i call some function on it, for example,

 var hover = document.createElement("div");
 hover.className = "hover";
 overlay.appendChild(hover);
 hover.onClick = alert("hi");

the onClick function isnt working. instead it displays an alert as soon as it reaches the div creation part of the script. what am i doing wrong?

Answer 1

You need to put the onclick in a function, something like this:

hover.onclick = function() {
   alert('hi!');
}

Answer 2

Try addEventHandler & attachEvent to attach event to an element :

if (hover.addEventListener)
{
 // addEventHandler Sample :
 hover.addEventListener('click',function () {
  alert("hi");
 },false);
}
else if (hover.attachEvent)
{
 // attachEvent sample : 
 hover.attachEvent('onclick',function () {
  alert("hi");
 });
}
else
{
 hover.onclick = function () { alert("hi"); };
}

Answer 3

The property name is "onclick" not "onClick". JavaScript is case sensitive.

It also takes a function. The return value of alert(someString) is not a function.