3
05/11/2024 9:29 am
Topic starter
Your task is to take values from input fields with id’s “newItemText” and “newItemValue” and create and append an <option> to the <select> with id “menu”.
HTML and JavaScript Code - You are given the following HTML code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fill Dropdown</title> <script src="dropdown.js"></script> </head> <body> <h1>Dropdown Menu</h1> <div> <select id="menu"></select> </div> <label for="newItemText">Text: </label><input type="text" id="newItemText" /> <label for="newItemValue">Value: </label><input type="text" id="newItemValue" /> <input type="button" value="Add" onclick="addItem()"> </body> </html>
- Your function should take the values of newItemText and newItemValue. After that you should create a new option element and set it’s textContent and it’s value to the newly taken ones.
- Once you have done all of that you should append the newly created option as a child to the select item with id “menu”.
- Finally you should clear the value of the two input fields.
Examples:
1 Answer
1
05/11/2024 9:30 am
Here is my solution - with HTML and the JavaScript code inside:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Fill Dropdown</title> </head> <body> <h1>Dropdown Menu</h1> <div> <select id="menu"></select> </div> <label for="newItemText">Text: </label><input type="text" id="newItemText"/> <label for="newItemValue">Value: </label><input type="text" id="newItemValue"/> <input type="button" value="Add" onclick="addItem()"> <script> function addItem() { let inputText = document.getElementById("newItemText"); let inputValue = document.getElementById("newItemValue"); let option = document.createElement("option"); option.value = inputValue.value; option.textContent = inputText.value; document.getElementById("menu").appendChild(option); inputText.value = ""; inputValue.value = ""; } </script> </body> </html>