I am making a "Cart" page, and I need to send the item data using the "Add to Cart" button. This is the function in Javascript.
function addProductToCart(title, priceTag, productImage) {
var cartShopBox = document.createElement('div')
cartShopBox.classList.add('sm-product')
var cartItems = document.getElementsByClassName('cartContainer')[0];
var cartItemsNames = document.getElementsByClassName('sm-product-title');
for (var i = 0; i < cartItemsNames.length; i++) {
if (cartItemsNames[i].innerText == title) {
alert('you already have this in your cart!');
return;
}
}
var cartBoxContent = `
<img src="${productImage}" class="sm-product-img" alt="" />
<div class="sm-text">
<p class="sm-product-title">
${title}
</p>
</div>
<div class=”prices”>
<div class="sm-price">${priceTag}</div>
</div>
<i class="delete">Remove</i>
`;
cartShopBox.innerHTML = cartBoxContent;
cartItems.append(cartShopBox);
cartShopBox.getElementsByClassName('delete')[0].addEventListener('click',
removeCartItem);
}
Now, this gives me an "Uncaught TypeError: Cannot read properties of undefined (reading 'append'). This javascript code is found in the productdetails.html file and the cart.html file, but it does not allow me to append the title, image, and price to the cart html.