Question

Question #47452

I need a JS Code to Work with the following HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Shopping List</title>
<script type="text/javascript" src=""></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>

I came up with this:
var shoppingList = ['Milk', 'Eggs', 'Bread'];
var outputDIV = document.getElementById('printedList');

function AddItem(){
shoppingList.push('Bananas');
document.getElementById('printedList').innerHTML = shoppingList;
}
function RemoveLastItem(){
shoppingList.pop();
document.getElementById('printedList').innerHTML = shoppingList;
}

I need to to have it to involve this:

shoppingList.push('item to add');

shoppingList.pop();

and lastly the ouputDIV

outputDIV.innerHTML = shoppingList.toString();

Expert's answer

Answer on Question #47452, Programming, AJAX | JavaScript | HTML | PHP

Problem.

I need a JS Code to Work with the following HTML Code:

<!DOCTYPE html>
<html>
<head>
<title>Shopping List</title>
<script src="" type="text/javascript"></script>
</head>
<body>
<p>Use the field below to add items to your shopping list.</p>
<input name="txtItem" id="txtItem" type="text" 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>

I came up with this:

var shoppingList = ['Milk', 'Eggs', 'Bread'];
var outputDIV = document.getElementById('printedList');
function AddItem(){
shoppingList.push('Bananas');
document.getElementById('printedList').innerHTML = shoppingList;
}
function RemoveLastItem(){
shoppingList.pop();
document.getElementById('printedList').innerHTML = shoppingList;
}

I need to to have it to involve this:

shoppingList.push('item to add');
shoppingList.pop();

and lastly the outputDIV

outputDIV.innerHTML = shoppingList.toString();

Solution.

It is better to include javascript code at the end of html to ensure that html code is loaded.

Code

<!DOCTYPE html>
<html>
<head>
<title>Shopping List</title></head>
<body>
<p>Use the field below to add items to your shopping list.</p>
<input name="txtItem" id="txtItem" type="text" placeholder="Enter an Item"/>
<br/>
<button onclick="AddItem();">Add Item</button>
<button onclick="RemoveLastItem();">Remove Last Item</button>
<div id="printedList"></div>
<script type="text/javascript">
var shoppingList = [];
var outputDIV = document.getElementById('printedList');
var item = document.getElementById('txtItem');
function AddItem() {
shoppingList.push(item.value);
outputDIV.innerHTML = shoppingList;
}
function RemoveLastItem() {
shoppingList.pop();
outputDIV.innerHTML = shoppingList;
}
</script>
</body>
</html>

Result

Use the field below to add items to your shopping list.

Apple

Question #47452

Expert's answer

Comments