我只想从这个dom值中拉取元素

Question

() 我做了一个电子商务网站，问题是当我尝试通过 DOM 获取我的购物车数据值时，这些值显示为未定义、空或对象节点列表。我没有得到具体的数值或字符串。 结果（）有时显示未定义和空值。我只需要提取确切的值。

html 和内联 js 代码

<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 name = document.getElementsByTagName("h5, h6").value;

                var url = "https://wa.me/number?text=" +
                    "Name: " + name + "%0a";
                    ": " + name + "%0a";

                window.open(url, '_blank').focus();
            }
        </script>
```

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);```

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();`
```