Javascript 未捕获类型错误：无法读取属性'；增补列表器'；空值（多种形式）

各位开发者好

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

我收到错误“UncaughtTypeError:无法读取null的属性'addEventListener'。我做了很多尝试，我在这里找到了，但他们没有在我的代码上工作：/有趣的是，我的代码正在工作！所以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不是很在行，只是想变得越来越好-

这就是你如何“开始”你的代码。已加载！==渲染（不能100%确定这些术语是否正确）。 尝试将其包装在自动执行函数中：

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

这就是你如何“开始”你的代码。已加载！==渲染（不能100%确定这些术语是否正确）。 尝试将其包装在自动执行函数中：

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

---

如何将js加载到页面中？脚本标签？请将您的html标题添加到问题中。@“我的正文结尾”标记我确信在创建/呈现元素本身之前，您的

searchGif

已被指定。要等待这种情况发生，请参见：Codepen自动包装用户的代码，这可能是它在那里工作的原因。但这与我现在所做的完全相同？首先：加载HTML然后加载JS？我看不出有什么区别：（如何将js加载到页面？脚本标记？请将您的html标题添加到问题中。@my body标记末尾我很确定在创建/呈现元素本身之前，您的

searchGif

已被分配。要等待这种情况发生，请参见：Codepen自动包装用户的代码，这可能是它工作的原因。）但是这和我现在做的完全一样？首先：加载HTML然后加载JS？我看不出区别：（我已经尝试过了，因为这是一个解决方案，链接在顶部的主要主题中。但是它不起作用：（我会得到两个错误，而不仅仅是一个。相同的错误，但在两行不同的行上没有。（首先像上面的例子，第二个错误是我关闭函数的那一行（脚本的结尾），然后我想你必须发布你的整个html。否则很难复制。-我已经尝试过了，因为这是一个解决方案，链接在上面的主主题中。但是它不起作用：（我将得到两个错误，而不仅仅是一个。相同的错误，但在两行不同的代码中没有。（第一个类似于上面的示例，第二个错误出现在我关闭函数的那行（脚本的结尾），然后我认为您将不得不发布整个html。否则很难复制-