Answer to Question #47585 in AJAX | JavaScript | HTML | PHP for john

Question

Answer to Question #47585 in AJAX | JavaScript | HTML | PHP for john

Question #47585

I need a JS Code to go with the following HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Shopping List</title>
<script type="text/javascript" src="Week6.js"></script>
</head>
<body>
<p>Use the field below to add items to your shopping list.</p>
<input type="text" name="txtItem" id="txtItem" placeholder="Enter an Item" />
<br />
<br />

<button onclick="AddItem();">Add Item</button>
<button onclick="RemoveLastItem();">Remove Last Item</button>
<div id="printedList"></div>
</body>
</html>

Ive gotten this but It's not working.
var shoppingList = [];
var outputDIV = document.getElementById('printedList');
var txtItem = document.getElementById('txtItem');

function AddItem() {
shoppingList.push(txtItem.value);
outputDIV.innerHTML = shoppingList;
}

function RemoveLastItem() {
shoppingList.pop();
outputDIV.innerHTML = shoppingList;
}

This week we will be building a simple Shopping List. In the template files, I have already created the HTML, including a text field, 2 buttons, and a DIV that we will use for our output. The 2 buttons each have the click event handler set to a function in the .js file. One of the buttons will add whatever item is in the text box to the array and then print it int he output DIV with the id of 'printedList'. The other will remove the last item from the array and then print the array again.

In the .js file you will notice that I have already declared an array called shoppingList for you. You'll also notice that it isn't inside either of the functions. The reason for this is called Scope. Up until now we have only dealt with variables inside our function. When we declare a variable inside a function, that particular function is the only thing that can access it. This is referred to as the local scope. When we just declare it in our js file without being inside a function, it instead becomes Global Scope, which means any function that we declared could access the data inside that array. Think about if you have your grocery list on your refrigerator vs in your bag. On the refridgerator would be global, as anyone in the house has access to it.

The 2 built in JavaScript methods you will be utilizing are .pop and .push. This is how we populate or remove things from an array in JavaScript.

1) PUSH - push allows us to add items to a JavaScript array. Assuming our array is called shoppingList (like in the assignment) we would utilize it like:

shoppingList.push('item to add');

2) POP - pop is a built in method that will remove the last item from an array. If we had an array that contained the items "Milk", "Eggs", "Bread", the .pop method would remove Bread. Unlike the .push method, it does not take an argument, so it's usage would look like this:

shoppingList.pop();

To print the array we can simply use the .toString() method. As a more complicated, albiet more presentable, way to display the array, you could use a loop along with some html and css to really make a nice looking list. However, we are more concerned with functionality over aesthetics. Like last week, once we have our output DIV into a variable that we can target, we can print the list using the following line:

outputDIV.innerHTML = shoppingList.toString();

Expert's answer

Download Answer