為什么我得到未捕獲的類型錯誤屬性值無法設置為未定義？

Question

Html

<div class="container">
<!-- navigation bar-->
<div class="navigator">
<div class="navi_contents">
<img src="images/logo.png" alt="logo" height="100px" width="100px">
<table>
    <tr>
        <td><input type="search" placeholder="Search keywords,products and 
brands"></td>
        <td><label for="search" class="fa fa-search" style="cursor: 
pointer;"></label></td>
    </tr>
</table>

<ul>
<a href="#"><li>Cart</li></a>
<a href="#"><li>Login</li></a>
</ul>
</div>

僅給出一半 html 代碼以確保 class 容器存在

Javascript

var homePage=document.getElementsByClassName('container');
var cartPage = document.getElementsByClassName('cart_container');
var cart_products = document.getElementsByClassName('cart_row');
function product(n){
    homePage.style.display="none";
    cartPage.style.display="block";
    cart_products[0].style.display="block";
    cart_products[n].style.display="block";
}

未捕獲的類型錯誤：無法設置未定義的屬性“顯示”。 瀏覽器顯示主頁，cartPage 未定義

Answer 1

您正在獲取Elements一個homePage數組，因此主頁不包含一個元素，而是包含很多元素，因此如下所示應用樣式。

    function myFunction() {
      var x = document.getElementsByClassName("container");
      x[0].style.display="none";
    }

它將樣式應用於元素數組中的第一個元素

Answer 2

只需替換document.getElementsByClassName('container'); 與document.querySelector(".container"); 獲取 DOM 中與選擇匹配的第一個元素，並對其他語句執行相同的操作。

對於多個元素選擇，使用document.querySelectorAll("<selector>")來支持其他 CSS 選擇器類型（id、標簽等）

Answer 3

似乎cartPage是未定義的。 您應該檢查cart_container class 名稱是否存在於 HTML 中