guy making a small project, in this case a simple fake shopping cart. i have and
ID: 3701154 • Letter: G
Question
guy making a small project, in this case a simple fake shopping cart. i have and add button and a remove button. but the remove button is only taking out the last product i entered and not the one am clicking. i think the issues is on my removeProduct function. not sure if i am making the right use of splice or do i need to take another aproach please advice.
<html>
<head>
<title>Orders</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//create array that will hold all ordered products
var shoppingCart = [];
//this function manipulates DOM and displays content of our shopping cart
function displayShoppingCart(){
var orderedProductsTblBody=document.getElementById("orderedProductsTblBody");
//ensure we delete all previously added rows from ordered products table
while(orderedProductsTblBody.rows.length>0) {
orderedProductsTblBody.deleteRow(0);
}
//variable to hold total price of shopping cart
var cart_total_price=0;
//iterate over array of objects
for(var product in shoppingCart){
//add new row
var row=orderedProductsTblBody.insertRow();
//create three cells for product properties
var cellName = row.insertCell(0);
var cellDescription = row.insertCell(1);
var cellPrice = row.insertCell(2);
cellPrice.align="right";
//fill cells with values from current product object of our array
cellName.innerHTML = shoppingCart[product].Name;
cellDescription.innerHTML = shoppingCart[product].Description;
cellPrice.innerHTML = shoppingCart[product].Price;
cart_total_price+=shoppingCart[product].Price;
}
//fill total cost of our shopping cart
document.getElementById("cart_total").innerHTML="Total = "+cart_total_price;
}
function AddtoCart(name,description,price){
//Below we create JavaScript Object that will hold three properties you have mentioned: Name,Description and Price
var singleProduct = {};
//Fill the product object with data
singleProduct.Name=name;
singleProduct.Description=description;
singleProduct.Price=price;
//Add newly created product to our shopping cart
shoppingCart.push(singleProduct);
//call display function to show on screen
displayShoppingCart();
}
function removefromCart(name, description, price){
//function removefromCart(name,description,price){
//Below we create JavaScript Object that will hold three properties you have mentioned: Name,Description and Price
var singleProduct = {};
//Fill the product object with data
singleProduct.Name=name;
singleProduct.Description=description;
singleProduct.Price=price;
//remove item from cart
//num.splice(num.indexOf(4), 1);
var index =shoppingCart.indexOf(singleProduct);
shoppingCart.splice(index, 1);
//call display function to show on screen
displayShoppingCart();
}
Explanation / Answer
Why your code is removing the last item instead of selected item?
?In your code, you added some products in to the shoppingCart list. As you know, the product you added is a associative array which is an object. so clearly, shoppingCart list will contain collection of objects. When you try to remove, a product from the shoppingCart list, you are preparing an object that has same field values as the object in the shoppingCart list. ?You are not producing the same object, instead you are producing a different object that has same values as the one in the shoppingCart list. ? Hence, when you try to find that object in shoppingCart list you get -1(it returns -1 when the element you searched is not in the list). and without checking that you are simply removing the element at index returned by indexOf() method, which is -1 in our case, in JavaScript, negative indexing works from the last to first, means that, deleting the element at index -1 actually deletes the last element. This is why your code is removing the last element.
?How to fix this???
?See the code below
<html>
<head>
<title>Orders</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function search(key, array){
for(var i = 0;i < array.length;i++) {
var element = array[i];
if (element.Name === key.Name) {
if(element.Description === key.Description) {
if(element.Price === key.Price) {
alert("I found you at index "+i+"!!!");
return i; // return the correct index
}
}
}
}
return -1; // if no matching element is found!!
}
function myfunc() {
var shoppingCart = []; // our products list
// add product 1
var sp1 = {};
sp1.Name="Mobile";
sp1.Description="iPhone6";
sp1.Price=1000;
shoppingCart.push(sp1);
// add product 2
var sp2 = {};
sp2.Name ="PC";
sp2.Description ="iMac";
sp2.Price = 2000;
shoppingCart.push(sp2);
// product we want to search
var singleProduct = {};
singleProduct.Name="Mobile";
singleProduct.Description="iPhone6";
singleProduct.Price=1000;
// try searching it with indexOf method
alert("Index is : "+shoppingCart.indexOf(singleProduct));
// here we search the find object in the list
var index = search(singleProduct, shoppingCart);
// now you got the correct index
// check it once
if(index === -1) {
// means the object is not in the list
} else {
// object is present in the list
// so, remove it
}
}
</script>
</head>
<body>
<p id="write"></p>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.