Remplir Zone de Liste Déroulante avec les valeurs de la matrice

J'ai une obligation de remplir une zone de liste déroulante dans mon formulaire avec les races humaines. Je crois que je l'ai fait correctement mais j'obtiens une erreur qui dit que Erreur: Impossible d'obtenir la propriété "appendChild' undefined ou référence null

Ce que je fais mal?

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;   
}
  • semble bien fonctionner mate (violon). Quand est-ce que le script ne soit appelé? Que d'un côté, i<options.length est assez parce que l'Index de tableau commence à 0.
  • Je vais appeler le script dans le corps de l'HTML.
  • Est-il après le code de l'élément RaceDropDown ou avant?
  • Je suis de l'appeler devant elle.
  • Le script doit être appelée après que l'élément est créé, sinon il ne serait pas en mesure de trouver l'élément lorsqu'il est en cours d'exécution. pouvez-vous déplacer ce script juste avant la </body> tag?
  • N'a pas fonctionné. De Chat?
  • laissez-nous continuer cette discussion dans le chat

InformationsquelleAutor mwilson | 2013-08-17