Javascript Label Tag Problems

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

I used javascript to produce a checkbox inside a label
Nothing I could do would allow me to set the button's checked property
The onclick event would never trigger

The solution is more than a bit odd

I had to attach the onclick event to the label - not the checkbox
I had to set and check the button using an indirect reference

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

<!DOCTYPE html>

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.

No <label>

With <label>

var no_label = document.getElementById("no_label");

function no_label_Clicked(e){ if (e.target.checked) no_label.style.color = "red"; else no_label.style.color = "black"; }

some text just some text

red when checked red when checked

Clicking the checkbox changes the color of the text. No problem .. except that I had to use e.target 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.

Those in one column with a label, and one without.
Most have the box checked - using basically the exact same code
The 2 rows created via innerHTML don't have them checked
The problem being investigated is why the first checkbox in the With <label> column is not checked and does not work
The onclick event works for all the checkbox's except the first one in the With <label> column
For those boxes that are checked be default, they have to be turned off and back on for the color change to occur

Components are generated by code
No <label>	With <label>
red when checked	red when checked	Event test - changes color when the event works

The problem is in the following code snippet

  var cell2         = row.insertCell(1);
  var label         = document.createElement("label");
  var checkbox1     = document.createElement("input");

  checkbox1.type    = "checkbox";
  checkbox1.checked = true; // for test - it works
  cell2.appendChild(label);

  label.appendChild(checkbox1); // at this point everything is fine, the box is checked

  label.innerHTML += "Click me" + " &nbsp;"; // this is the line that breaks the links

  checkbox1.onclick = with_label_auto_Clicked; // checkbox1 is no longer associated with *label*

By commenting out the following line, I was able to verify that that is what is causing the problem.

  label.innerHTML += "Click me" + " &nbsp;"; // this is the line that breaks the links

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.

  var text1 = document.createTextNode("Click me" + " &nbsp;"); 
  label.appendChild(text1);  // this fixes the problem - except that " &nbsp;" is displayed

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.

  var text1 = document.createTextNode("Click me" + " &nbsp;"); 
  label.appendChild(text1); // this fixes the problem
  checkbox1.onclick = with_label_auto_Clicked;

  text1.innerHTML += "Click me" + " &nbsp;"; // this failed, TextNode's don't have an innerHTML

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

// This fixes the problem

  span = document.createElement("span");

  label.appendChild(span);
  checkbox1.onclick = with_label_auto_Clicked; // This works

  span.innerHTML += "Click me" + " &nbsp;";    // Finally - success !!!

Postscript

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

When onclick is included via innerHTML, this points to window
When cb1.onclick = some_function is used in code, this points to cb1 (the checkbox)

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.

var checkboxOnClick = function(event){
  var series = this.mcSeries;

  if (this.childNodes[0].checked){
    series.style.strokeStyle = "#00FF00";
  }else{
    series.style.strokeStyle = "#FF0000";
  }
  g1.show();
}

To make this work,

The event is attached to the label
The keyword this refers to the label
The only way (that I found) to access the button was to use

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