0

我需要在我的表单中填充人类种族的下拉列表框。我相信我做对了，但是我收到一个错误，上面写着Error: Unable to get property 'appendChild' of undefined or null reference

我究竟做错了什么？

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;   
}
4

2 回答 2

3

改变这个：

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

至

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

只需要做<。不是<=

于 2013-08-17T03:42:12.773 回答
1

正如我在评论中提到的，应该在创建元素后调用脚本。如果没有，脚本会抛出错误，因为它找不到select要添加的元素options。

请创建一个用于填充下拉列表的函数，并onload像下面这样调用它：

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;

顺便说一句，在 for 循环i < options.length中代替i <= options.length.

于 2013-08-17T04:28:13.990 回答