Javascript - Label Tag Problems

The label tag associates text with a checkbox or radiobutton so that clicking on the text is the same as clicking on the button itself. I frequently use this in web-based applications.

I was developing some code and had an interesting issue

The solution is more than a bit odd This is complete nonsense.

I have placed checkbox's inside a labels for a number of projects with no issues .. using straight html - not javascript. There should be no difference.

I spent several hours searching the web - as far as I can tell, I am the only person with these issues.

This page contains a number of examples - most will work as expected.

To be clear, this page, and the one that was failing, has

That tag has caused numerous issues, so it is necessary to specify that both pages have it.

In the final analysis (now that I think I understand the real issue), this has nothing (and everything) to do with the label tag. The problem is that using innerHTML to add information to any tag causes anything DOM object inside that tag to be recreated - thus losing all configuration data. However,the only tag I considered doing this with is the label tag - because I wanted to associate text with a checkbox. So, the label tag is not the problem, but it is the only tag where I am likely to see this problem.

Basic Test | Creating Components via Code | Postscript | Before I found the real problem

Basic Test

These are hard coded examples using only html in this page to create the testcases. Javascript is attached to the buttons. Clicking the checkbox changes the color of the text. No problem .. except that I had to use to get a reference to the checkboxes.

In all my other code, this provides that reference - in this case, it refers to the window object.

Creating Components via Code

All of these checkbox's are created by code - each row represents a different testcase. The one marked This works solved the problem and is described below. The problem is in the following code snippet By commenting out the following line, I was able to verify that that is what is causing the problem. Apparently, this replaces the current checkbox object with a new one - as a result, the box is no longer checked and why the event can not be added.

According to w3schools, the "correct" way to accomplish this is to use the following.

Well, that fails - but in a different way. The checkbox works as expected, but the   is displayed instead of creating a non-breakable space.

Next I tried setting the innerHTML of the TextNode - silly me, TextNode's don't have an innerHTML - no change.

This is what finally worked - I used a span and set its innerHTML


There are dozens of possible combinations - it took most of 2 days to work this out.

I checked these issues on several browser - When changing the innerHTML to add text to a label tag, they all failed the same.

The other issue is very troubling - on this page, in some of the event calls, the keyword this points to the window, in others, it points to the checkbox.

In all cases, the checkboxes are inside a table.

The difference appears to be how the event's is added

The final line of the table above was used to verify this.

Before I found the real problem

This is the code I was using in my application to access the checkbox. To make this work, Since this is common code called by many buttons, access must be via a reference to the button (label) that was clicked.

In my opinion, using the span technique described in the previous section is much better (easier to understand and maintain).

Author: Robert Clemenzi
URL: http:// / Languages / Javascript / Label_tag_problems.html