NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There
ID: 3746483 • Letter: N
Question
NEED HELP
DIRECTIONS:
Notice that there is one input area and two buttons
There is a place in the HTML reserved for < li > elements under the heading “Shopping List”
Write a javascript program that will cause whatever the user inputs to be placed in a newly -created < li > tag and the tag placed inside the < ul > element whenever the user clicks the button
Your program must not create any < li > tag is the user clicks the button without entering anything in the input area. If the user does that, the program should display a message within the < span > tag set aside for the error messages.
General Algorithm: (Stuff is missing that you have to fill in)
Make the + button clickable so that it will:
Get the data entered by the user when the button is clicked.
Check to see if the user entered something. If she did:
Create a new < li > tag using document.createElement{“li”)
Assign the value entered by the user to the new tag.
Append the new tag to the < ul > element with the id =”list”
Else
Put an error message in between the span tags with id =”error”
Make the clear button clickable so that it will clear the contents of the < ul > tag.
HTML:
Shopping List
Enter a list item:
Click button to add item to the list:
+
Click button to clear the list:
Clear
Shopping List
Explanation / Answer
<html>
<head>
<title>Unorder list Example</title>
<script type="text/javascript">
function clear() {
alert("clear");
var err = document.getElementById("error");
var list = document.getElementById("list");
while (list.firstChild) {
list.removeChild(list.firstChild);
}
err.style.display = "none";
document.getElementById("input").value = "";
}
function add() {
alert("add");
var err = document.getElementById("error");
var list = document.getElementById("list");
var text = document.getElementById("input").value;
if (text.trim() == "") {
err.style.display = "block";
} else {
err.style.display = "none";
var element = document.createElement("LI");
var textnode = document.createTextNode(text);
element.appendChild(textnode);
list.appendChild(element);
document.getElementById("input").value = "";
}
}
</script>
</head>
<body>
<form>
<table width="100%">
<tr>
<td colspan="2"><h1>Shopping List</h1></td>
</tr>
<tr>
<td colspan="2">Enter a list item: <input id="input"
type="text" /></td>
</tr>
<tr>
<td colspan="2">Click button to add item to the list: <input type="button" value="+"/>
</td>
</tr>
<tr>
<td colspan="2">Click button to clear the list:
<input type="button" value="Clear"/>
</td>
</tr>
<tr>
<td width="75%"><h1>Shopping List</h1></td>
<td rowspan="2"><span id="error"><font
color="red">Input box should not be empty</font> </span></td>
</tr>
<tr>
<td><ul id="list"></ul></td>
</tr>
</table>
</form>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.