如何修复“无法读取 null 的属性‘addEventListener’”答案

【问题标题】：How to fix "Cannot read property 'addEventListener' of null"如何修复“无法读取 null 的属性‘addEventListener’”
【发布时间】：2020-02-06 16:49:40
【问题描述】：

我正在学习如何通过视频教程制作自动完成搜索栏。我做了视频所做的一切都无济于事。我认为问题出在 add.EventListener 上。当我在 Chrome 中运行代码时，在控制台中显示：

未捕获的类型错误：无法读取 null 的属性“addEventListener”

代码：

searchInput.addEventListener('keyup', function() {
const input = searchInput.value;
suggestionsPanel.innerHTML = '';
const suggestions = movies.filter(function(movie) {
  return movie.name.toUpperCase().startsWith(input);
});
suggestions.forEach(function(suggested){
  const div = document.createElement('div');
  div.innerHTML = suggested;
  suggestionsPanel.appendChild(div);
});
if (input=== ''){
  suggestionsPanel='';
} })

这是 JavaScript 代码，下面是查看任何错误的 HTML 代码。

<html>
<head>
    <link rel="icon" href="Geofflixlogo.png">
    <title>Geofflix</title>
    <link rel="stylesheet" href="geofflix.css">
    <script src="geofflix.js" type="text/javascript"></script>
</head>

<body>
    <div class="header">
        <div class="logo">
            <a href="index.html">
            <img src="Logo.png" height="50">
            </a>
        <div class="navi">
            Watch what everyone's talking about. For Free!        
        </div>
        <div class="searchbar">
                <input class="search-input" type="text" placeholder="Search...">
                <div class="suggestions">
                </div>                
        </div>      
        <div class="nav">
                <a href="index.html">Home</a>
                <a href="Movies.html">Movies</a>
          </div>
        </div>
    </div>
 </body>

【问题讨论】：

查看searchInput的定义会有所帮助
这意味着searchInput 不包含对您认为包含的元素的引用。
还有suggestionsPanel -))
您可以通过这种方式document.getElementByClassName('search-input')[0].addEventListener('keyup', function() {.....} 使用正确的选择器来解决输入搜索输入问题，但前提是只有 1 个 input.search-input 否则您必须向该字段添加一个唯一 ID 并且使用document.getElementById('input_id')

标签： javascript html

【解决方案1】：

我不知道你的错误来自哪里，但看看我的功能，似乎没问题。

let searchInput = document.querySelector('.search-input');
let suggestionsPanel = document.querySelector('.suggestions')
searchInput.addEventListener('keyup', function() {
 const input = searchInput.value;
 suggestionsPanel.innerHTML = input;
});

和工作小提琴：https://jsfiddle.net/70ynvh4r/1/

【讨论】：