Populate Drop Down List Box with values from array

Question

I have a requirement to populate a drop down list box in my form with human races. I believe I've done it correctly but I get an error that says Error: Unable to get property 'appendChild' of undefined or null reference

What am I doing wrong?

HTML:

<!DOCTYPE html />
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="TheCSS.css" />
    <style type="text/css">
        .style1 {
            height: 26px;
        }
    </style>
</head>

<body>
    <script type="text/javascript" src="C:\Users\Marc\Desktop\JavaScript     Projects\TheJavaScript.js"></script>
    <center>
        <table class="style1">
            <tr>
                <td colspan="4">
                    <center>
                        <h1><b>New Hire Form</b></h1>
                    </center>
                </td>
            </tr>
            <tr>
                <td id="subHeader" colspan="4"></td>
            </tr>
            <tr>
                <td class="style3">First Name</td>
                <td class="style2">
                    <input type="text" id="FirstName" onchange="return LastName_onchange()" />
                </td>
                <td class="style4">Last Name</td>
                <td>
                    <input id="LastName" type="text" onchange="return FirstName_onchange()" />
                </td>
            </tr>
            <tr>
                <td class="style1">Sex</td>
                <td class="style1">Male
                    <input id="Radio1" checked="true" name="R1" type="radio" value="M" />&nbsp;&nbsp;&nbsp; Female
                    <input id="Radio1" checked="true" name="R1" type="radio" value="F" />
                </td>
                <td class="style1">Race</td>
                <td class="style1">
                    <select id="RaceDropDown" name="D1"></select>
                </td>
            </tr>
            <tr>
                <td class="style3">&nbsp;</td>
                <td class="style2">&nbsp;</td>
                <td class="style4">
                    <input type="button" id="myButt" value="Submit Entry" onclick="return      myButt_onclick()" />
                </td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </center>
</body>
</html>

JavaScript:

var select = document.getElementById('RaceDropDown');
var options = ["Asian", "Black"];
var i;
for (i = 0; i < options.length; i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

function LastName_onchange() {
    var LastName = document.getElementById('LastName').value;
    var FirstName = document.getElementById('FirstName').value;
    document.getElementById('subHeader').textContent = FirstName + " " + LastName + " " + new Date();
}

function FirstName_onchange() {
    var LastName = document.getElementById('LastName').value;
    var FirstName = document.getElementById('FirstName').value;
    document.getElementById('subHeader').textContent = FirstName + " " + LastName + " " + new Date();
}

CSS:

#subHeader
{
    text-align: right;   
}

seems to work fine mate (fiddle). When is the script being called? As a side, i<options.length is enough because the array Index starts with 0. — Harry
– Harry, Commented Aug 17, 2013 at 3:40
Is it after the code for the element RaceDropDown or before it? — Harry
– Harry, Commented Aug 17, 2013 at 3:49
The script should be called after the element is created, else it would not be able to find the element when it is being executed. can you move this script to just before the </body> tag? — Harry
– Harry, Commented Aug 17, 2013 at 3:57

Brigand · Accepted Answer · 2013-08-17 04:22:10Z

3

Change this:

for (i = 0; i <= options.length; i++)

to

for (i = 0; i < options.length; i++)

Just need to do < . not <=

edited Aug 17, 2013 at 4:22

Brigand

86.4k20 gold badges167 silver badges174 bronze badges

answered Aug 17, 2013 at 3:42

poodle

1071 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harry · Accepted Answer · 2013-08-17 04:28:13Z

As mentioned in my comments, the script should be called after the element is created. If not, the script would throw an error because it will not find the select element to add options.

Please create a function for populating the drop-down and call it onload like the below:

function popDropDown() {
    var select = document.getElementById('RaceDropDown');
    var options = ["Asian", "Black", "White"];
    var i;
    for (i = 0; i < options.length; i++) {
        var opt = options[i];
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
    }
}

window.onload = popDropDown;

As an aside, in the for loop i < options.length is enough instead of i <= options.length.

Collectives™ on Stack Overflow

Populate Drop Down List Box with values from array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related