NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There
ID: 3746484 • 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.
HERE IS THE HTML
<!DOCTYPE html>
<html>
<head>
<title>Shopping List</title>
</head>
<body>
<div>
<p>
<label>Enter a list item: </label><input type="text" id = "item"><br>
Click button to add item to the list:
<button id="add">+</button><br>
Click button to clear the list:
<button id="clear">Clear</button>
</p>
<div>
<h3>Shopping List</h3>
<ul id = "list">
</ul>
</div>
</div>
</body>
</html>
Explanation / Answer
Hi,
According to the requirements, I have introduced couple of functions naming 'enter()' and 'clearFunction()' to enter data entered by the user into the <ul> under 'shopping list' and to clear data of <ul> respectively. Also added a <span> near input text box to show error message if user hit the add button without putting data into input text box. I am pasting the code below.
----- HTML Solution -----
<!DOCTYPE html>
<html>
<head>
<title>Shopping List</title>
<script type="text/javascript">
function enter()
{
var user_value=document.getElementById("item").value;
if(user_value=="")
{
document.getElementById("error").style.visibility="visible"; //Make error message visible
}
else
{
document.getElementById("error").style.visibility="hidden"; //Hide error message
var list_node=document.createElement("LI"); //Creating LI node
var text_node = document.createTextNode(user_value); //creating text node
list_node.appendChild(text_node); // appending li node with text node
document.getElementById("list").appendChild(list_node); //appending li node to list
document.getElementById("item").value=""; //clearing textbox value after addition
}
}
function clearFunction()
{
var ul = document.getElementById("list");
while(ul.firstChild) ul.removeChild(ul.firstChild); //clearing list values
}
</script>
</head>
<body>
<div>
<p>
<label>Enter a list item: </label><input type="text" id = "item">
<span id="error">This field is mandatory.</span><br>
<!-- Error Message -->
Click button to add item to the list:
<button id="add">+</button><br>
<!-- Made button clickable inserting onclick -->
Click button to clear the list:
<button id="clear">Clear</button>
</p>
<div>
<h3>Shopping List</h3>
<ul id = "list">
</ul>
</div>
</div>
</body>
</html>
---------- End Of Code --------
Thats all. Please comment queries or doubts if any.
Thank you.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.