3
07/11/2024 12:59 pm
Argomento iniziale
Write a JS function that read the text inside an input field and appends the specified text to a list inside an HTML page.
Input/Output:
There will be no input/output, your program should instead modify the DOM of the given HTML document.
Sample HTML:
<h1>List of Items</h1> <ul id="items"><li>First</li><li>Second</li></ul> <input type="text" id="newItemText" /> <input type="button" value="Add" onclick="addItem()"> <script> function addItem() { // TODO: add new item to the list } </script>
Examples:
1 risposta
2
07/11/2024 1:01 pm
Here is my solution:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>List of Items:</h1> <ul id="items"> <li>First</li> <li>Second</li> </ul> <input type="text" id="newItemText"> <input type="button" value="Add an Item" onclick="addItem()"> <script> function addItem() { let input = document.getElementById("newItemText"); if (input.value.length === 0) { return; } let text = input.value; let newLi = document.createElement("li"); newLi.textContent = text; document.getElementById("items").appendChild(newLi); input.value = ""; } </script> </body>
...and another one:
script> function addItem() { let text = document.getElementById("newItemText").value; let li = document.createElement("li"); li.textContent = text; let items = document.getElementById("items"); items.appendChild(li); document.getElementById("newItemText").value = ""; } </script>