I am trying to add a checkbox list to a form. When I use the following code, I get all the items in the array but no checkboxes, so I cannot select anything. I'm sure there is a very simple solution to this, but I can't see what I'm doing wrong (I'm new at this). Many thanks in advance for your help. Here is the code:

var check_value = new Array()
check_value[0] = "I work at home"
check_value[1] = "Train/Subway"
check_value[2] = "Walk"
check_value[3] = "Bicycle"

for(count in check_value)
    {
    var ptworkinfo=document.createElement("input");
    ptworkinfo.type="checkbox";
    ptworkinfo=(check_value[count] + "</br>");
    ptworkinfo.id="ptworkinfo";
    document.write(ptworkinfo);
    count+=count;
    }

I am trying to add a checkbox list to a form. When I use the following code, I get all the items in the array but no checkboxes, so I cannot select anything. I'm sure there is a very simple solution to this, but I can't see what I'm doing wrong (I'm new at this). Many thanks in advance for your help. Here is the code:

var check_value = new Array()
check_value[0] = "I work at home"
check_value[1] = "Train/Subway"
check_value[2] = "Walk"
check_value[3] = "Bicycle"

for(count in check_value)
    {
    var ptworkinfo=document.createElement("input");
    ptworkinfo.type="checkbox";
    ptworkinfo=(check_value[count] + "</br>");
    ptworkinfo.id="ptworkinfo";
    document.write(ptworkinfo);
    count+=count;
    }

• javascript
• checkbox
• createelement

• the second "ptworkinfo=" overwrites the first. – Diodeus - James MacFarlane Commented Oct 23, 2012 at 14:46

4 Answers 4

There are a couple of problems here:

1) Never use document.write - The standard, pure javascript implementation you need to be using is to appendChild to a parent element. For example:

var parentElement = document.getElementById('myParentElement');

if(parentElement != null)
   parentElement.appendChild(myChildElement);

2) Using this knowledge, you can easily add elements with a simple rework of your statements:

var parentElement = document.getElementById('myParentElement');

for(var count in check_value)
{
    var newCheckBox = document.createElement('input');
    newCheckBox.type = 'checkbox';
    newCheckBox.id = 'ptworkinfo' + count; // need unique Ids!
    newCheckBox.value = check_value[count] + '<br/>';

    parentElement.appendChild(newCheckBox);
}

Looks like you just forgot to put .value on one of your lines. Instead, it is overwriting the variable you created as an input box with a string.

...
    ptworkinfo.value =(check_value[count] + "</br>");
...

First create an element of type input. Then set it is type property to checkbox. This can be done in any of the 2 ways mentioned below.

const checkBox = document.createElement('input')
checkBox.type = 'checkbox'

Properties can be set using setAttribute function also. The first argument states what property is being updated. Here type property is updated to the type of checkbox.

checkBox.setAttribute('type','checkbox')

Here is the new code, updated from suggestions above (thank you). I am now getting a row of checkboxes with no text next to them. Also, weirdly, there is not a break after each checkbox, either. It's like the line " ptworkinfo.value=(check_value[count] + '< br/>'); " just isn't getting through. Any thoughts/suggestions?

var residence = document.getElementById('residence');

var check_value = new Array( )
check_value[0] = "I work at home"
check_value[1] = "Train/Subway"
check_value[2] = "Walk"
check_value[3] = "Bicycle"

for(var count in check_value)
    {
    var ptworkinfo=document.createElement("input");   
    ptworkinfo.value=(check_value[count] + '</br>');
    ptworkinfo.type="checkbox";
    ptworkinfo.id="ptworkinfo" + count;
    residence.appendChild(ptworkinfo);
    }