搜索按钮无法正常工作。控制台上显示错误。错误是“ element.getElementsByTagName(...)[0] is undefined ”。解决这个问题。我不能

Question

这是一个笔记应用程序，用户可以在其中添加他们的重要笔记。 所有代码都在这里，但搜索按钮不起作用。 当我单击搜索栏并输入一些文本以查找我的笔记时，控制台区域中会显示一个错误，即“ element.getElementsByTagName(...)[0] is undefined” 。 这是我的代码的问题。 我不明白为什么这会显示错误。 这段代码有什么问题。

<-- 这是 HTML 代码 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Notes App</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Magic Notes</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>

            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input id="searchTxt" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>


    <div class="container my-3">
        <h1>Welcome To Magic Notes</h1>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Add a note</h5>
                <div class="form-group">
                    <textarea class="form-control" id="addTxt" rows="3"></textarea>
                </div>
                <button class="btn btn-primary" id="addBtn">Add Note</button>
            </div>
        </div>
        <hr>
        <h1>Your Notes</h1>
        <hr>
        <div id="notes" class="row container-fluid"> </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="js/app.js"></script>
</body>

</html>

// This is Javascript code.

let addBtn = document.getElementById('addBtn');
addBtn.addEventListener('click', function(e){
  let addTxt = document.getElementById('addTxt');
  let notes = localStorage.getItem('notes');
  if ( notes == null ){
    notesObj = [];
  }
  else{
    notesObj = JSON.parse(notes);
  }
  notesObj.push(addTxt.value);
  localStorage.setItem('notes', JSON.stringify(notesObj));
  addTxt.value = '';
  console.log(notesObj);
  showNotes();
})

function showNotes(){
  let notes = localStorage.getItem('notes');
  if ( notes == null ){
    notesObj = [];
  }
  else{
    notesObj = JSON.parse(notes);
  }

  let html = "";
  
  notesObj.forEach(function(element, index){
    {
      html += `
      <div class="card" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">${index + 1}</h5>
        <p class="card-text">${element}</p>
        <button id="${index}" onclick = "deleteNotes(this.id)" class="btn btn-primary">Delete Note</button>
      </div>
    </div>`;
    };
  });
  let notesElement = document.getElementById('notes');
  if (notesObj.length != 0){
        notesElement.innerHTML = html;
  }
  else{
    notesElement.innerHTML = `Nothing to show!</br>
    Use this 'Note App' to add your note`;
  }
};
showNotes();

function deleteNotes(index){
  //console.log('I am Deleting', index);
  let notes = localStorage.getItem('notes');
  if ( notes == null ){
    notesObj = [];
  }
  else{
    notesObj = JSON.parse(notes);
  }
  notesObj.splice(index, 1);
  localStorage.setItem('notes', JSON.stringify(notesObj));
  showNotes();
}

let search = document.getElementById('searchTxt');
search.addEventListener("input", function(){

    let inputVal = search.value.toLowerCase();
     //console.log('Input event fired!', inputVal);

    let card = document.getElementsByClassName('card');
    Array.from(card).forEach(function(element){
        ****let cardTxt = element.getElementsByTagName("p")[0].innerText;****`enter code here`
        if ( cardTxt.includes(inputVal)){
          element.style.display = "block";`enter code here`
        }
        else {
          element.style.display = "none";
        }
    });    
    
});

Answer 1

有错误消息表明element.getElementsByTagName("p")正在返回一个空结果，考虑到该element是具有类card的元素并且 HTML 包含具有类card的元素，这并不奇怪，它不包含任何p元素。

搜索按钮无法正常工作。控制台上显示错误。错误是“ element.getElementsByTagName(...)[0] is undefined ”。解决这个问题。我不能

问题描述

1 个解决方案

解决方案1
1 2022-05-20 13:20:03

搜索按钮无法正常工作。 控制台上显示错误。 错误是“ element.getElementsByTagName(...)[0] is undefined ”。 解决这个问题。 我不能

问题描述

1 个解决方案

解决方案1 1 2022-05-20 13:20:03

搜索按钮无法正常工作。控制台上显示错误。错误是“ element.getElementsByTagName(...)[0] is undefined ”。解决这个问题。我不能

解决方案1
1 2022-05-20 13:20:03