(https://i.stack.imgur.com/v4NjG.png) I made a ecommerce website , the problem is when I try to get my cart data values through DOM the have been shown undefined, null or object node list. I didnt get the specific numeric value or strings.
and this the result (https://i.stack.imgur.com/Ret8b.png) somtimes it shows undefined and null.I just need to pull the exact value.
html and inline js code
<nav>
<!--Navbar has two part the top one and the bottom one-->
<!--Here is top one and in this part I put logo, my account part, and the shopping cart-->
<div class="navbar-top">
<div>
<button id="menuButton"><i class="fas fa-bars"></i></button>
<!--Logo-->
</div>
<div>
<!--My account part-->
<!--Shopping cart-->
<div class="shopping-cart">
<div class="sum-prices">
<!--Shopping cart logo-->
<i
class="fas fa-shopping-cart shoppingCartButton"
></i>
<!--The total prices of products in the shopping cart -->
<h6 id="sum-prices"></h6>
</div>
</div>
</div>
</div>
<!-- Navbar bottom part -->
<!-- Here I put the links to the other pages or nav links -->
<div class="producstOnCart hide">
<div class="overlay"></div>
<div class="top">
<button id="closeButton">
<i class="fas fa-times-circle"></i>
</button>
<h3>Cart</h3>
</div>
<ul id="buyItems">
<h4 class="empty">Your shopping cart is empty</h4>
<!-- <li class="buyItem">
<img src="Images/producs-images/Mobiles/galaxynote10.png">
<div>
<h5>Products Name</h5>
<h6>$199</h6>
<div>
<button>-</button>
<span class="countOfProduct">1</span>
<button>+</button>
</div>
</div>
</li> -->
</ul>
<button class="btn checkout hidden" onclick="gotowhatsapp()" id="checkout">Check out</button>
</div>
</nav>
<script>
function gotowhatsapp() {
var name = document.getElementsByClassName("buyItems, buyItem, h5, h6").value;
var products = document.getElementsByTagName("h5, h6").value;
var url = "https://wa.me/number?text=" +
"Name: " + name + "%0a" +
"Products: " + products + "%0a";
window.open(url, '_blank').focus();
}
</script>
```
The below code is external js code (script.js)
```
const responsiveNavbar = (function () {
const button = document.querySelector("#menuButton");
const navbar = document.querySelector("#navbar")
button.addEventListener("click", function () {
if (navbar.className === "navbar") {
navbar.className += " navbarResponsive";
}
else {
navbar.className = "navbar";
}
});
})();
if (document.getElementById('hearderSlide')) {
$('#hearderSlide').multislider();
$('#hearderSlide').multislider('pause');
}
function closeCart() {
const cart = document.querySelector('.producstOnCart');
cart.classList.toggle('hide');
document.querySelector('body').classList.toggle('stopScrolling')
}
const openShopCart = document.querySelector('.shoppingCartButton');
openShopCart.addEventListener('click', () => {
const cart = document.querySelector('.producstOnCart');
cart.classList.toggle('hide');
document.querySelector('body').classList.toggle('stopScrolling');
});
const closeShopCart = document.querySelector('#closeButton');
const overlay = document.querySelector('.overlay');
closeShopCart.addEventListener('click', closeCart);
overlay.addEventListener('click', closeCart);```
The below code is external js code (shopping-cart.js)
```
let productsInCart = JSON.parse(localStorage.getItem('shoppingCart'));
if(!productsInCart){
productsInCart = [];
}
const parentElement = document.querySelector('#buyItems');
const cartSumPrice = document.querySelector('#sum-prices');
const products = document.querySelectorAll('.product-under');
const countTheSumPrice = function () { // 4
let sum = 0;
productsInCart.forEach(item => {
sum += item.price;
});
return sum;
}
const updateShoppingCartHTML = function () { // 3
localStorage.setItem('shoppingCart', JSON.stringify(productsInCart));
if (productsInCart.length > 0) {
let result = productsInCart.map(product => {
return `
<li class="buyItem">
<img src="${product.image}">
<div>
<h5>${product.name}</h5>
<h6>$${product.price}</h6>
<div>
<button class="button-minus" data-id=${product.id}>-</button>
<span class="countOfProduct">${product.count}</span>
<button class="button-plus" data-id=${product.id}>+</button>
</div>
</div>
</li>`
});
parentElement.innerHTML = result.join('');
document.querySelector('.checkout').classList.remove('hidden');
cartSumPrice.innerHTML = '$' + countTheSumPrice();
}
else {
document.querySelector('.checkout').classList.add('hidden');
parentElement.innerHTML = '<h4 class="empty">Your shopping cart is empty</h4>';
cartSumPrice.innerHTML = '';
}
}
function updateProductsInCart(product) { // 2
for (let i = 0; i < productsInCart.length; i++) {
if (productsInCart[i].id == product.id) {
productsInCart[i].count += 1;
productsInCart[i].price = productsInCart[i].basePrice * productsInCart[i].count;
return;
}
}
productsInCart.push(product);
}
products.forEach(item => { // 1
item.addEventListener('click', (e) => {
if (e.target.classList.contains('addToCart')) {
const productID = e.target.dataset.productId;
const productName = item.querySelector('.productName').innerHTML;
const productPrice = item.querySelector('.priceValue').innerHTML;
const productImage = item.querySelector('img').src;
let product = {
name: productName,
image: productImage,
id: productID,
count: 1,
price: +productPrice,
basePrice: +productPrice,
}
updateProductsInCart(product);
updateShoppingCartHTML();
}
});
});
parentElement.addEventListener('click', (e) => { // Last
const isPlusButton = e.target.classList.contains('button-plus');
const isMinusButton = e.target.classList.contains('button-minus');
if (isPlusButton || isMinusButton) {
for (let i = 0; i < productsInCart.length; i++) {
if (productsInCart[i].id == e.target.dataset.id) {
if (isPlusButton) {
productsInCart[i].count += 1
}
else if (isMinusButton) {
productsInCart[i].count -= 1
}
productsInCart[i].price = productsInCart[i].basePrice * productsInCart[i].count;
}
if (productsInCart[i].count <= 0) {
productsInCart.splice(i, 1);
}
}
updateShoppingCartHTML();
}
});
updateShoppingCartHTML();`
```