This week we will be building a simple Shopping List Use the

This week we will be building a simple Shopping List. Use the template files included to write your JavaScript. When you click on the Add button, it should add whatever text is in the box to the list output. Likewise, when you click Remove Last Item, it should remove the last item in the list. You can utilize the .pop and .push methods to achieve this.

Also create a loop that will display each item in the list in the output div. You can use whichever HTML tags you choose to make the list readable. 2 Options would be <p> or <li>.

>I\'m having a hard time with the outputs and also making sure that I am using .push() and .pop() correctly. I don\'t know if I am accessing the correct fields in the HTML code for the items.

JAVASCRIPT CODE:

var shoppingList = [];

function AddItem(){

//Your code goes here
shoppingList.push(txtItem.value);
}

function RemoveLastItem(){

//Your code goes here
shoppingList.pop(txtItem.value);
}

//This is the event handler for the button.
function init() {
//Assign the HTML element to a JavaScript variable called btnAdd
var btnAdd = document.getElementById(\'btnAdd\');
//Set the AddItem function above to the onclick event of the button Variable
btnAdd.onclick = AddItem;
//Assign the HTML element to a JavaScript variable called btnAdd
var btnRemove = document.getElementById(\'btnRemove\');
//Set the AddItem function above to the onclick event of the button Variable
btnRemove.onclick = RemoveLastItem;
}

//Run the INIT function when the page finishes loading.
window.onload = init;

HTML CODE:

<!DOCTYPE html>
<html>

<head>
<title>Chapter 6 Shopping List</title>
<link href=\"Chapter6.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>

<body>
   <div class=\"main\">
       <h1>Grocery List</h1>
       <input type=\"text\" id=\"txtItem\" placeholder=\"Grocery Item\" />
       <br/>
       <button id=\"btnAdd\">Add</button>  <button id=\"btnRemove\">Remove Last Item</button>
       <br/>
       <div id=\"outputShoppingList\"></p>
   </div>
   <script src=\"Chapter6.js\"></script>
</body>

</html>

You had done most of the part. To update the html inside the div, just manipulate innerHTML.

Hence, loop through the shopping list and keep adding to the innerHTML.

While adding to the list, you don\'t need to redraw. Just add the latest item to the list. However, while removing you need to redraw. In this case just make innerHTML to empty and then populate all the remaining items in the shopping list.

Chapter6.js

var shoppingList = [];

function AddItem(){
//Your code goes here
    shoppingList.push(txtItem.value);
    console.log(shoppingList);
    document.getElementById(\"outputShoppingList\").innerHTML += \"<li>\" + txtItem.value + \"</li>\";

}

function RemoveLastItem(){
//Your code goes here
    shoppingList.pop(txtItem.value);
    document.getElementById(\"outputShoppingList\").innerHTML = \" \";
    console.log(shoppingList);
    for(i = 1; i <= shoppingList.length; i++) {
        document.getElementById(\"outputShoppingList\").innerHTML += \"<li>\" + shoppingList[i] + \"</li>\";
    }
}

//This is the event handler for the button.
function init() {
    console.log(\"init\");
    //Assign the HTML element to a JavaScript variable called btnAdd
    var btnAdd = document.getElementById(\'btnAdd\');
    //Set the AddItem function above to the onclick event of the button Variable
    btnAdd.onclick = AddItem;
    //Assign the HTML element to a JavaScript variable called btnAdd
    var btnRemove = document.getElementById(\'btnRemove\');
    //Set the AddItem function above to the onclick event of the button Variable
    btnRemove.onclick = RemoveLastItem;
}

//Run the INIT function when the page finishes loading.
window.onload = init;

index.html

<!DOCTYPE html>
<html>

<head>
<title>Chapter 6 Shopping List</title>
<link href=\"Chapter6.css\" rel=\"stylesheet\" type=\"text/css\" />
</head>

<body>
    <div class=\"main\">
        <h1>Grocery List</h1>
        <input type=\"text\" id=\"txtItem\" placeholder=\"Grocery Item\" />
        <br/>
        <button id=\"btnAdd\">Add</button>  <button id=\"btnRemove\">Remove Last Item</button>
        <br/>
        <div id=\"outputShoppingList\">
        </div>

</div>
<script src=\"Chapter6.js\"></script>
</body>

</html>

This week we will be building a simple Shopping List Use the

Solution

Get Help Now

Submit a Take Down Notice