admin管理员组文章数量:1307951
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" /> 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"> </td>
<td class="style2"> </td>
<td class="style4">
<input type="button" id="myButt" value="Submit Entry" onclick="return myButt_onclick()" />
</td>
<td> </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;
}
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" /> 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"> </td>
<td class="style2"> </td>
<td class="style4">
<input type="button" id="myButt" value="Submit Entry" onclick="return myButt_onclick()" />
</td>
<td> </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.lengthis enough because the array Index starts with 0. – Harry Commented Aug 17, 2013 at 3:40 - I'm calling the script in the body of the HTML. – mwilson Commented Aug 17, 2013 at 3:47
-
Is it after the code for the element
RaceDropDownor before it? – Harry Commented Aug 17, 2013 at 3:49 - I'm calling it before it. – mwilson Commented Aug 17, 2013 at 3:52
-
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 Commented Aug 17, 2013 at 3:57
2 Answers
Reset to default 3Change this:
for (i = 0; i <= options.length; i++)
to
for (i = 0; i < options.length; i++)
Just need to do < . not <=
As mentioned in my ments, 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.
本文标签： javascriptPopulate Drop Down List Box with values from arrayStack Overflow
版权声明：本文标题：javascript - Populate Drop Down List Box with values from array - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741854932a2401285.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论