ZuoTi.Pro
Question

NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There is a...

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>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

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" style="visibility: hidden; color:red;">This field is mandatory.</span><br>

<!-- Error Message -->

Click button to add item to the list:

<button id="add" onclick="enter()">+</button><br>

<!-- Made button clickable inserting onclick -->

Click button to clear the list:

<button id="clear" onclick="clearFunction()">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.

0 0
Add a comment
Know the answer?
Add Answer to:
NEED HELP DIRECTIONS: Notice that there is one input area and two buttons There is a...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • To do list - Javascript Javascript(only)  needs to be added in order to do the following:...

    To do list - Javascript Javascript(only)  needs to be added in order to do the following: Add a new todo item to the list, complete with trash icon Remove the item when the trash icon is clicked Clear the input when the user clicks back into it to add another item. This is already in place in the JS window: (codepen)     (function(){     })(); HTML: <div class="card">     <div class="card-body">         <h3 class="card-title">Today's To Do List</h3>         <form id="todo-form">             <div class="form-group">                 <input type="text" class="form-control"...

  • In this problem, you will create a selectable “To Do” List. To add a task to...

    In this problem, you will create a selectable “To Do” List. To add a task to this list, the user clicks the Add Task button and enters a description of the task. To delete a task from the list, the user selects the task and then clicks the Delete Task button. Open the HTML and JavaScript files provided as start-up files (index.html from within todo_list_Q.zip file). Then, review the HTML in this file. Note, within the div element, there is...

  • for Javascript, JQuery When the page is first opened a user will see the name field...

    for Javascript, JQuery When the page is first opened a user will see the name field and the three vacation images to the left of the page. The page should behave according to the following rules. 1. When a user's mouse pointer goes over any image, that image's border will change to be "outset 10px" and when the mouse pointer leaves that image it's border will change to "none". 2. When the user clicks a "Vacation" image on the left,...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • Hello! I am to create a .js file that allows the paragraph on the bottom of...

    Hello! I am to create a .js file that allows the paragraph on the bottom of the page to update with what the user enters. I need to modify the given HTML to recognize the javascript file that I am to make from scratch. The HTML file and other details are below: Use the given HTML to add functionality to an interactive form that generates an invitation to volunteers for an event. The file will have the following invitation message...

  • Please edit and add all the code needed to make the images side by side and to put the buttons in...

    Please edit and add all the code needed to make the images side by side and to put the buttons in the middle of the images. Thank you index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Untitled Document</title> <!-- Bootstrap -->    <link href="css/bootstrap-4.0.0.css" rel="stylesheet">    <link href="style.css" rel="stylesheet" type="text/css">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header>    <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Lakeside Resort Spot</a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation">...

  • JavaScript (Please debug this code) When a user enters a string in the input box, the...

    JavaScript (Please debug this code) When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page. When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should...

  • I need help, I have my page set up, I just need help with some aesthetics,...

    I need help, I have my page set up, I just need help with some aesthetics, and getting the clear button to work, and get a popup when they click submit that says success along as all fields are filled out correctly. Any help would be fantastic. <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styleSheet.css" /> <title>2020-2021 Student-Athlete Registration Form - Weber State University</title> </head> <body> <header> <h1>WEBER STATE UNIVERSITY</h1> </header> <div class="link"> <ul> <li><a href="page 1.html"><span class="text">Home</span></a></li> </ul> </div>...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

    URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to download the uncompressed latest version of jQuery Copy the jQuery.x.x.x.js file in the folder and specified as source file. Task 2: Download and install HTML-Kit 1. Navigate to htmlkit.com. 2. Click Download HTML-Kit 292. After it downloads, launch HKSetup.exe. Choose Full installation (the default) Uncheck Yes, download and install HTML-Kit Tools Trial. 6. Click Next>Finish. Task 3: Creating a Simple jQuery Application Launch HTML-Kit....

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT