107 728
Assignments Done
100%
Successfully Done
In April 2024
In April 2024
Your physics assignments can be a real challenge, and the due date can be really close — feel free to use our assistance and get the desired result.
Physics
Be sure that math assignments completed by our experts will be error-free and done according to your instructions specified in the submitted order form.
Math
Our experts will gladly share their knowledge and help you with programming projects. Keep up with the world’s newest programming trends.
Programming
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();
<!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
Finding a professional expert in "partial differential equations" in the advanced level is difficult.
You can find this expert in "Assignmentexpert.com" with confidence.
Exceptional experts! I appreciate your help. God bless you!
#340153 on Dec 2023
#340153 on Dec 2023
Comments
Dear John, You're welcome. We are glad to be helpful. If you liked our service please press like-button beside answer field. Thank you!
Thanks it worked. Thank you very much
Leave a comment