onclick event getting "lost"

[chazz]

hello, I am new to the forum and generally new to the javascript world. I seem to be having a problem hooking events to checkboxes. As I add checkboxes and attach events to them the all get lost except the last one I added.


var vals = document.createElement("input");
vals.setAttribute("type", "checkbox");
vals.onclick = function(){alert("show click");};
p.addControl(vals, "Show Values.");

var checkBox = document.createElement("input");
checkBox.setAttribute("type", "checkbox");
checkBox.setAttribute("checked", "true");
checkBox.onclick = function(){alert("update clicked");};
p.addControl(checkBox, "Auto Update.");

var box = document.createElement("input");
box.setAttribute("type", "checkbox");
box.setAttribute("checked", "true");
box.onclick = function(){alert("another clicked");};
p.addControl(box, "another.");

addControl = function(element, txt)
{
var controls = this.element.getElementsByTagName("controls")[0];
controls.innerHTML += txt;
controls.appendChild(element);
}


So when clicking the checkboxes an alert dialog should show if you click any of the checkboxes, but in this case only the last checkbox added shows the alert. What am i doing wrong here?

thanks
-ChazZ

[Ultragames]

The problem is that onclick is basicly an attribute like any other. You can't set a links Title to one thing, and then set it to another and expect them to both be there. the method of adding events that you are using has this same problem.

What you need to use is an event listener. This works great in Firefox, but Internet Explorer's model breaks the this functionality. I suggest reading through this article (http://www.quirksmode.org/js/events_tradmod.html), (and I mean reading, not copy & pasting code.)

[chazz]

"The problem is that onclick is basicly an attribute like any other. You can't set a links Title to one thing, and then set it to another and expect them to both be there. the method of adding events that you are using has this same problem."

I get what you are saying here, but this is not what i am doing(i think) i have created 3 separate elements and set their onclicks respectively. so they should have events assigned to them, but i only get the last one. this is true even if i replace the "onclick" likes with addEventListener, or attachEvent functions, the previous two always get lost, i only get the event for the last one.

The article you linked was quite informative but it did not address my problem.


var vals = document.createElement("input");
var checkBox = document.createElement("input");
var box = document.createElement("input");


is that not the right way to create 3 individual elements?

[Ultragames]

You are right, I misunderstood what you are doing.
My only thought on this is that maybe p can only have on control, and you are trying to add multiples. I am not familiar with addControl. Are you sure that you do not want to be using p.appendChild?

[chazz]

You are right, I misunderstood what you are doing.
My only thought on this is that maybe p can only have on control, and you are trying to add multiples. I am not familiar with addControl. Are you sure that you do not want to be using p.appendChild?

im sorry, I made a cut paste error, the p.addControl refers to the addControl at the bottom of the original snippet. I pulled it out of context of the whole of what i was doing. I did however, figure out what i did wrong, but am at a loss as to why. Apparently there can be some "funnyness", as i observed, when mixing calls to "x.innerHTML" and "x.appendChild" (have a look at the addControl function). if i remove the "innerHTML" expression i get my events back and they work properly. Can anyone enlighten me as to why its so bad to mix innerHML and appendChild? friggen weird.