错误：无法读取未定义的属性“innerText”答案

【问题标题】：error: Cannot read property 'innerText' of undefined错误：无法读取未定义的属性“innerText”
【发布时间】：2021-02-24 17:57:09
【问题描述】：

我在关注 YouTube 教程，在制作购物车页面时遇到了这个错误，有人知道如何解决这个问题吗？

<!------- js for toggle menu -------->

var MenuItems = document.getElementById("MenuItems");

MenuItems.style.maxHeight = "0px";

function menutoggle() {
    if (MenuItems.style.maxHeight == "0px") {
        MenuItems.style.maxHeight = "200px";
    } else {
        MenuItems.style.maxHeight = "0px";
    }
}

var removeCartItemsButton = document.getElementsByClassName('remove-danger')
console.log(removeCartItemsButton)
for (var i = 0; i < removeCartItemsButton.length; i++) {
    var button = removeCartItemsButton[i]
    button.addEventListener('click', function(event) {
        var buttonClicked = event.target
        buttonClicked.parentElement.parentElement.remove()
        updateCartTotal()
    })
}

function updateCartTotal() {
    var cartItemContainer = document.getElementsByClassName('cart-items')[0]
    var cartItems = cartItemContainer.getElementsByClassName('cart-info')
    for (var i = 0; i < cartItems.length; i++) {
        var cartItems = cartItems[i]
        var priceElement = cartItems.getElementsByClassName('cart-price')[0]
        var quantityElement = cartItems.getElementsByClassName('cart-quantity-input')[0]
        var price = priceElement.innerText
        console.log(price)
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cart | Fritz PC's</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="cart.js" async></script>
</head>
<body>

    <div class="container">
        <div class="navbar">
            <div class="logo">
               <a href="index.html"><img src="images/fritzpclogo.png" width="150px" alt="logo"></a>
            </div>
            <nav>
                <ul id="MenuItems">
                    <li><a href="index.html"><b>Home</b></a></li>
                    <li><a href="products.html"><b>Products</b></a></li>
                    <li><a href=""><b>About</b></a></li>
                    <li><a href=""><b>Contact</b></a></li>
                    <li><a href="account.html"><b>Account</b></a></li>
                </ul>
                <a href="cart.html">
                    <img src="images/cart.png" width="30px" height="30px">
                    </a>
                <img src="images/menu.png" class="menu-icon" onclick="menutoggle()">
            </nav>
        </div>
    </div>

    <!------- cart item details ------->

    <div class="small-container cart-page">

    <div class="cart-items">
        <table>
            <tr>
                <th>Product</th>
                <th>Quantity</th>
                <th>Subtotal</th>
            </tr>
            <tr>
                <td>
    
                    <div class="cart-info">
                        <img src="images/r5-3600.jpg">
                        <div>
                            <p>Ryzen 5 3600 6C/12T</p>
                            <small>$69.9</small>
                            <br>
                            <button type="button" class="remove remove-danger">Remove</button>
                        </div>
                    </div>
    
                </td>
                <td><input class="cart-quantity-input" type="number" value="1"></td>
                <td class="cart-price">$231.16</td>
            </tr>
            <tr>
                <td>
    
                    <div class="cart-info">
                        <img src="images/r5-3600.jpg">
                        <div>
                            <p>Ryzen 5 3600 6C/12T</p>
                            <small>$99.9</small>
                            <br>
                            <button type="button" class="remove remove-danger">Remove</button>
                        </div>
                    </div>
    
                </td>
                <td><input class="cart-quantity-input" type="number" value="1"></td>
                <td class="cart-price">$99.9</td>
            </tr>
            <tr>
                <td>
    
                    <div class="cart-info">
                        <img src="images/r5-3600.jpg">
                        <div>
                            <p>Ryzen 5 3600 6C/12T</p>
                            <small>$49.9 KWD</small>
                            <br>
                            <button type="button"class="remove remove-danger">Remove</button>
                        </div>
                    </div>
    
                </td>
                <td><input class="cart-quantity-input" type="number" value="1"></td>
                <td class="cart-price">$49.9</td>
            </tr>
            <tr>
                <td>
    
                    <div class="cart-info">
                        <img src="images/r5-3600.jpg">
                        <div>
                            <p>Ryzen 5 3600 6C/12T</p>
                            <small>$19.9 KWD</small>
                            <br>
                            <button type="button" class="remove remove-danger">Remove</button>
                        </div>
                    </div>
    
                </td>
                <td><input class="cart-quantity-input" type="number" value="1"></td>
                <td class="cart-price">$19.9</td>
            </tr>
        </table>
    </div>


    <div class="total-price">

        <table>
            <tr>
                <td>Subtotal</td>
                <td>239.6 KWD</td>
            </tr>
            <tr>
                <td>Shipping</td>
                <td>3 KWD</td>
            </tr>
            <tr>
                <td>Total</td>
                <td>242.6 KWD</td>
            </tr>
        </table>

    </div>

    </div>

    <!------- footer ------->
    
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="footer-col-1">
                    <h3>Join our discord server</h3>
                    <p>Join our discord server if you have any 
                        <br>
                        doubts or questions :)</p>
                        <div class="discord-logo">
                            <img src="images/discord-logo.png">
                        </div>
                </div>
                <div class="footer-col-2">
                    <img src="images/fritzpclogo.png">
                    <p>Our goal is to make and sell high quality 
                        <br>
                        Gaming/Streaming PC's with minimum profit</p>
                </div>
                <div class="footer-col-3">
                    <h3>Useful links</h3>
                    <ul>
                        <li>Coupons</li>
                        <li>Blog</li>
                        <li>Return Policy</li>
                        <li>Join Affiliate</li>
                    </ul>
                </div>
                <div class="footer-col-3">
                    <h3>Follow Us</h3>
                    <ul>
                        <li>YouTube</li>
                        <li>Instagram</li>
                        <li>Twitter</li>
                        <li>Discord</li>
                    </ul>
                </div>
            </div>
            <hr>
            <p class="copyright">Copyright 2021 - Fritz PC's</p>
        </div>
    </div>
</body>
</html>

【问题讨论】：

这是我得到的错误：cart.js:20 Uncaught TypeError: Cannot read property 'innerText' of undefined at updateCartTotal (cart.js:20) at HTMLButtonElement.<anonymous> (cart.js:8)
很确定这意味着您在价格元素中获得了一个空值：var price = priceElement.innerText 或许可以尝试在该位置使用三元运算符解决这个问题，例如 var price = priceElement.innerText ? priceElement.innerText : 0

标签： javascript html css

【解决方案1】：

var cartItems = cartItems[i] 行在本地覆盖了 cartItems 变量。你可能打算写var cartItem = cartItems[i]。

话虽如此，错误的原因是<td class="cart-price"> 不在<div class="cart-info"> 内。 cartItems 是对购物车信息 div 的“引用”，cartItems.getElementsByClassName 将在 cartItems 元素内查找具有传递的类名的所有元素。要解决此问题，您只需将cart-price div 放入cart-info div 中，如下所示：

<div class="cart-info">
   <img src="images/">
   <div>
      <p>...</p>
      <small>...</small>
      <br>
      <button type="button" class="remove remove-danger">Remove</button>
   </div>
   <input class="cart-quantity-input" type="number" value="1"></td>
   <div class="cart-price">...</div>
</div>

另外：请记住，<td 标签只能放在表格中，而不是 div，因此如果将它们移动到 cart-info div 中，则应该更改标签。或者，您可以在 cart-items div 中查找元素。

【讨论】：