CODEWITHSUNDEEP
javascripthtml
Zac
Zac

Reputation: 2211

Checkbox text not visible

I have looked for possible roots of my issue but have been unable to do so.

I have some java Script that dynamically creates a list of check boxes. Some have text other have anchor links with text inside that.

It looks like this:

 createCheckbox: function (checkBoxDiv, sensorName, sensorId, checked, makeHyperLink, guid) {
        var liElement = document.createElement("li");
        var checkBoxElement = document.createElement("input");
        checkBoxElement.setType = "checkbox";
        checkBoxElement.name = "sensorName";
        checkBoxElement.id = "check" + sensorId;
        checkBoxElement.setAttribute("type", "checkbox");
        checkBoxElement.setAttribute("runat", "server");
        checkBoxElement.setAttribute("onchange", "OnCheckedChangedMethod('" + sensorName + "')");
        if (checked)
            checkBoxElement.setAttribute("checked", "true");
        if (makeHyperLink) {
            var linkElement = document.createElement("a");
            linkElement.setAttribute("style", "color:white;");
            linkElement.setAttribute("href", "#");
            linkElement.id = "link" + sensorId;
            linkElement.text = "" + sensorName;
            checkBoxElement.appendChild(linkElement);
        } else {
            checkBoxElement.setAttribute("text", sensorName);
        }
        liElement.appendChild(checkBoxElement);
        this.checkboxes++;
        return liElement;
}

This returns the element to be appended to my div.

It creates this list correctly and the HTML looks like this: 

<ol id="sensorList"><li>
      Sensors
    </li><li><input id="check1" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('0-Predator Simulator (FLIR)')" checked="true"><a id="link1" style="color:white;" href="#">
      Item1
    </a></input></li><li><input id="check2" type="checkbox" name="sensorName" runat="server" onchange="OnCheckedChangedMethod('a')"><a id="link2" style="color:white;" href="#">
      Item2
    </a></input></li>
</ol>

The webpage looks like this:

enter image description here

I have tried removing all of my css incase it was something to do with that and nesting the text in other tags: <p> , <h1>but nothing changes.

Any thoughts on what the root of this problem might be. I am still fairly new to web programming.

Thanks

Upvotes: 2

Views: 1872

Answers (1)

Mahmood Dehghan
Mahmood Dehghan

Reputation: 8265

input element can't have children. So this:

checkBoxElement.appendChild(linkElement);

is incorrect. Instead use label element that contains both checkbox and link:

var labelElement = document.createElement("label");
labelElement.appendChild(checkBoxElement);
labelElement.appendChild(linkElement);

Edit: You can't click on link element to change checked state of the checkbox. because it refreshes the page (with href='#'). What do you want to do with link element?

Upvotes: 6

Related Questions