未捕获的类型错误：无法读取 null 的属性“addEventListener”（多种形式）

Posted 2023-03-25

【中文标题】未捕获的类型错误：无法读取 null 的属性“addEventListener”（多种形式）

【英文标题】：Uncaught TypeError: Cannot read property 'addEventListener' of null (multiple forms)

【发布时间】：2020-12-31 23:00:31

【问题描述】：

各位开发者您好，

我有一个简单的问题。我正在研究我的 javascript 技能，这显然不是最好的:)。我正在尝试使用tutorial 的giphy API 编写一个搜索框。在视频 5 之前，我的代码与教程中显示的代码一样 100% 工作，但现在（视频 6）它不再工作了。

我收到错误“Uncaught TypeError: Cannot read property 'addEventListener' of null”。我googled 很多，并尝试了我在这里找到的fixes，但他们没有处理我的代码：/ 有趣的是，我的代码正在处理codepen.io！因此，codepen 和我的本地网站之间的唯一区别是多个搜索表单和引导程序。所以我猜测问题是多个搜索表单，因为这行：

const searchGif = document.getElementById("search-gif");
const searchInput = document.getElementById("gif-search-string"); 
searchGif.addEventListener('submit', function(event)
   event.preventDefault();
   const query = searchInput.value;
   search(query);
)

但我想，因为我在执行其余的 javascript 代码之前通过 ID 获取了正确的表单，所以可以吗？所以我希望你能帮助我解决我的问题。就像我说的，我的 JS 不是很好，只是想变得越来越好

PS：通过 html 正文末尾的 script 标签加载我的脚本 PS2：这是我完整的 HTML 代码 -> index.php - timeline-gif.php

【问题讨论】：

如何将你的js加载到页面中？脚本标签？请将您的 html 标题添加到问题中。

@我的body标签结束

我很确定您的searchGif 是在创建/渲染元素本身之前分配的。要等待这种情况发生，请参阅：***.com/a/9899701/5243272 Codepen 自动包装用户的代码，这可能是它在那里工作的原因。

但这和我现在做的完全一样？首先：加载 HTML 然后加载 JS？我看不出有什么区别:(

【参考方案1】：

这是您“启动”代码的方式。加载！== 渲染（不是 100% 确定这些是正确的术语）。 尝试将其包装在一个自执行函数中：

(function() 
 // Put your code here - dom should be available
)();

【讨论】：

我已经在尝试这个了，因为它是链接在顶部主题中的帖子中的一个解决方案。但它不起作用:(我会得到 2 个错误，而不仅仅是一个。

同样的错误，但在 2 个不同的行上没有。 （首先像上面的示例和我关闭函数的行上的第二个错误（脚本结尾）

那么我认为您必须发布整个 html。否则很难复制。

index.php - timeline-gif.php