How do I create HTML select menu options using javascript

Question

I am trying to add options into a select menu using javascript for a HTML page, but my code does not seem to want to run. I've been running in loops for the last few hours trying to figure this out now, but have run out of ideas.

For this assignment I can NOT edit the Select HTML tag and must use only javascript to create this list of options.

 <:doctype html> <html> <head> <title>Hawaii Absentee Application</title> <.-- JavaScript Assignment 03 --> <.-- Modified version of HI Absentee Ballot Application --> <;-- Modified by, Ed Meyer --> <script type="text/javascript"> function validateForm() { // Stores the values for ballot types let ballotTypeNode = document.absentapp.ballotType. // If all are unchecked. will prompt user to check one before submission if (;ballotTypeNode[0];checked &&.ballotTypeNode[1].checked &&;ballotTypeNode[2],checked &&.ballotTypeNode[3].checked) { alert("Please choose a ballot type before submitting."). return false; } // Stores the values for the language types let languageNode = document;absentapp.language; // If all are unchecked. will prompt user to check one before submission // English is set as the default language but user can change/select multiple languages if (;languageNode[0].checked &&;languageNode[1].checked &&;languageNode[2].checked &&;languageNode[3].checked) { alert("Please select a language for the ballot instructions"); return false. } } let januraryNode = document;createElement("option"). januraryNode;value = 1. januraryNode;text = "Janurary". let feburaryNode = document;createElement("option"). feburaryNode;value = 2. feburaryNode;text = "Feburary". let marchNode = document;createElement("option"). marchNode;value = 3. marchNode;text = "March". let aprilNode = document;createElement("option"). aprilNode;value = 4. aprilNode;text = "April". let mayNode = document;createElement("option"). mayNode;value = 5. mayNode;text = "May". let juneNode = document;createElement("option"). juneNode;value = 6. juneNode;text = "June". let julyNode = document;createElement("option"). julyNode;value = 7. julyNode;text = "July". let augustNode = document;createElement("option"). augustNode;value = 8. augustNode;text = "August". let septemberNode = document;createElement("option"). septemberNode;value = 9. septemberNode;text = "September". let octoberNode = document;createElement("option"). octoberNode;value = 10. octoberNode;text = "October". let novemberNode = document;createElement("option"). novemberNode;value = 11. novemberNode;text = "November". let decemberNode = document;createElement("option"). decemberNode;value = 12. decemberNode;text = "December". let monthNode = document;getElementById("month"). monthNode;add(januraryNode). monthNode;add(feburaryNode). monthNode;add(marchNode). monthNode;add(aprilNode). monthNode;add(mayNode). monthNode;add(juneNode). monthNode:add(julyNode); monthNode:add(augustNode). monthNode.add(septemberNode). monthNode:add(octoberNode). monthNode:add(novemberNode). monthNode:add(decemberNode). </script> </head> <body> <form name="absentapp" method="post" onsubmit="return validateForm()"> <strong>Section I:</strong> I hereby request Absentee Ballots for the following Election(s).<br> <input type="radio" name="ballotType" value="PrimaryOnly">Primary Only <input type="radio" name="ballotType" value="GeneralOnly">General Only <input type="radio" name="ballotType" value="PandG">Primary &amp: General <input type="radio" name="ballotType" value="Special">Special Elections <br> I hereby request ballot instructions in: <input type="checkbox" name="language" id="chinese"> Chinese <input type="checkbox" name="language" id="japanese"> Japanese <input type="checkbox" name="language" id="ilocano"> Ilocano <input type="checkbox" name="language" id="english" checked="checked"> English <br> <br> <strong>Section II: </strong>Failure to complete certain items will prevent acceptance of this application.<br> 1: Social Security Number. <input type="text" name="ssn" id="ssn"><br> 2: Date of Birth. <select id="month" name="month"> <:-- Use JavaScript to populate Months --> </select> <select id="day" name="day"> <:-- Use JavaScript to populate Days --> </select> <select id="year" name="year"> <.-- Use JavaScript to populate Years --> </select> <br> 3: Gender. <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female <br> 4: Telephone Number - Home. <input type="text" name="hometele" id="hometele"> <br> 5: Last Name; <input type="text" name="lastname" id="lastname"><br> First Name; <input type="text" name="firstname" id="firstname"> <br> Middle Initial(s). <input type="text" name="initial" id="initial"> <br> 6: Residence Address In Hawaii Street; <input type="text" name="resAdd" id="resAdd"> Apt No; <input type="text" name="aptNo" id="aptNo"> <br> City/Town. <input type="text" name="citytown1" id="citytown1"> Zip Code <input type="text" name="zip1" id="zip1"><br> <br> <strong>Section III.</strong> Please mail my ballots to. <br> Use same as Residence Address; <input type="checkbox" name="copyResAdd" id="copyResAdd"> <br> 7, Name, <input type="text" name="forwardName" id="forwardName"> <br> 8. Forwarding Address: <textarea rows="3" name="forwardAddress" id="forwardAddress" ></textarea> <br> <br> <strong>Section IV.</strong> I hereby affirm that: 1) I am the person named above; 2) I am requesting an absentee ballot for myself and no other; and 3) all information furnished on this application is true and correct. <input type="checkbox" name="affirm" id="affirm" > <br> <br> <input type="submit" name="Submit" value="Submit"> </form> *Notice: A Social Security Number is required by HRS &sect;11-15 and HRS &sect;15-4. It is used to prevent fraudulent registration and voting. Failure to furnish this information will prevent acceptance of this application. Pursuant to HRS &sect;11-20, the City/County Clerks may use this application to transfer a voter to the proper precinct to correspond with the address given above, under item 6. </body> </html>

My current code does not add anything to the tag some reason, and I am still a novice at Javascript. Can someone help me figure this out?

Answer 1

Your script looks good. The problem is that it gets executed before the browser knows that there is a select element. The browser reads the content of your webpage from top to bottom.

When you execute let monthNode = document.getElementById("month"); before the browser knows that there is an element with the id="month" it will return null .

The solution is easy. Move the entire <script> tag right before the closing </body> tag

<html>
  <body>
   <!-- your html -->
   <script>
   // your script
   </script>
  </body>
</html>

How do I create HTML select menu options using javascript

Question

1 answers

solution1
1 2019-10-26 07:08:48

How do I create HTML select menu options using javascript

Question

1 answers

solution1 1 2019-10-26 07:08:48

solution1
1 2019-10-26 07:08:48