HTML 和 Javascript 搜索引導卡

Question

在搜索表單上鍵入時，Javascript 返回：“未捕獲的類型錯誤：無法讀取 null 的屬性‘innerText’”。

我有一個包含一些 Bootstrap 卡片的頁面，我想按名稱過濾卡片。 我試圖獲取“卡片標題”元素類來驗證搜索過濾器。

HTML代碼：

<div class="container">
  <div class="row">
    <div class="col-sm-4 mb-4">
      <input type="text" id="myFilter" class="form-control" onkeyup="myFunction()" placeholder="Search for card name...">
    </div>
  </div>

  <div class="row" id="myProducts">

    <div class="col-md-4">
      <div class="card">

        <div class="card-header bg-dark d-sm-flex justify-content-sm-between align-items-sm-center">
          <div class=" card-title">
            <a href="#" style="color:white" class="display-inline-   block" onmouseover="this.style.color='#00e6ac'" onmouseout="this.style.color='#fff'">
       <strong>Card 1</strong>
            </a>
          </div>
        </div>
        <div class="card-body bg-light">
          0000x01
        </div>
        <div class="card-footer bg-white d-flex justify-content-between">
          <div>
            <i class="icon-arrow-right5 mr-2"></i>Card number one
          </div>
        </div>
      </div>
      <div class="card">

        <div class="card-header bg-dark d-sm-flex justify-content-sm-between align-items-sm-center">
          <div class=" card-title">
            <a href="#" style="color:white" class="display-inline-   block" onmouseover="this.style.color='#00e6ac'" onmouseout="this.style.color='#fff'">
       <strong>Card 2</strong>
            </a>
          </div>
        </div>
        <div class="card-body bg-light">
          0000x02
        </div>
        <div class="card-footer bg-white d-flex justify-content-between">
          <div>
            <i class="icon-arrow-right5 mr-2"></i>Card number two
          </div>
        </div>
      </div>
    </div>
    <!-- /transparent header, white footer -->
  </div>
</div>

Javascript

function myFunction() {
  var input, filter, cards, cardContainer, title, i;
  input = document.getElementById("myFilter");
  filter = input.value.toUpperCase();
  cardContainer = document.getElementById("myProducts");
  cards = cardContainer.getElementsByClassName("card");
  for (i = 0; i < cards.length; i++) {
    title = cards[i].querySelector("card-title");
    if (title.innerText.toUpperCase().indexOf(filter) > -1) {
      cards[i].style.display = "";
    } else {
      cards[i].style.display = "none";
    }
  }
}

也在測試： https : //codepen.io/pratykus/pen/WNeJpyK

每次我在過濾器框上輸入時，我都會收到遞增的錯誤：(6) Uncaught TypeError: Cannot read property 'innerText' of null

Answer 1

當您使用.querySelector您應該指定class or the element 。 在您的情況下，您的元素是 div 而您嘗試訪問的類是card-title ，因此更改：

title = cards[i].querySelector("card-title");

到：

title = cards[i].querySelector(".card-title");

Answer 2

如果您將 CSS 類作為選擇器傳遞給querySelector() ，則必須在其后附加 dot .

title = cards[i].querySelector(".card-title");

進行此更改以解決問題。