仅存在于一个 HTML 文件中的元素，阻止我所有其他 HTML 文件运行 JS
Posted
技术标签:
【中文标题】仅存在于一个 HTML 文件中的元素，阻止我所有其他 HTML 文件运行 JS【英文标题】：An element that only exists in one HTML file, stops all my other HTML files from running JS 【发布时间】：2021-09-10 08:10:46 【问题描述】：我有 5 个 html 都链接到 1 个仅 JS 和 1 个仅 CSS。所有内容都在同一个文件夹中。
在其中一个 HTML 文件中，有一个 div 与网格颜色类。我写了一个for loop 来访问这个网格颜色div，它工作正常。但是，我的所有其他 HTML 文件都会在控制台中显示 Uncaught TypeError: gridColors is null 的错误。我猜javascript试图在打开的文件中找到网格颜色div，但它只存在于一个HTML文件中。我如何确保 javascript 仅在一个文件中查找此类？或者我该如何解决这个错误？
元素工作的 HTML
<div class="grid-colors"></div>
Javascript
const gridColors = document.querySelector(".grid-colors");
for (let i = 0; i < 36; i++)
const item = document.createElement("div");
item.classList.add("color-grid-item");
gridColors.appendChild(item);
【问题讨论】：
将代码包装在检查元素是否不为空的条件中，这样它只在不为空时运行。 【参考方案1】：有条件地检查元素是否不为空应该可以解决您的问题。
const gridColors = document.querySelector(".grid-colors");
if (gridColors !== null)
for (let i = 0; i < 36; i++)
const item = document.createElement("div");
item.classList.add("color-grid-item");
gridColors.appendChild(item);
【讨论】：
【参考方案2】：有两种方法：
- 您的其他 HTML 文件没有
gridColors 元素。如果您在没有函数的情况下在全局范围内定义了代码，那么唯一的方法是检查gridColors 变量是否为null，如果是，则跳出for 循环。
const gridColors = document.querySelector(".grid-colors");
for (let i = 0; i < 36; i++)
if(!gridColors) break; //escapes the error
const item = document.createElement("div");
item.classList.add("color-grid-item");
gridColors.appendChild(item);
-
如果代码位于 JS 文件中的
function 中，并且您只需要在特定 HTML 页面中调用该函数，请对该 HTML 页面使用 onload 函数，如下所示：
<body onload="theFunction()">
...
...
</body>
【讨论】：
【参考方案3】：要定义局部范围变量，您需要使用 var，而不是 const。 https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
var gridColors = document.querySelector(".grid-colors");
for (let i = 0; i < 36; i++)
var item = document.createElement("div");
item.classList.add("color-grid-item");
gridColors.appendChild(item);
【讨论】：
但是 JS 文件中的变量范围会有什么帮助呢？他将继续在所有其他 4 个 html 文件中收到错误，因为缺少所需的元素，只有空检查可以帮助这里已经回答。 @Xth 是的，范围没有帮助我猜其他元素没有出现这个问题，因为我通过函数管理它们但我现在想知道......我是否总是要问变量是否是否为 null 以便代码正常运行？ @AlanRothmanMariñoCruel 我认为是的，因为在您的代码中，您将类添加到 div 元素，如果您的元素不存在，则无法将其添加到任何内容中以上是关于仅存在于一个 HTML 文件中的元素，阻止我所有其他 HTML 文件运行 JS的主要内容，如果未能解决你的问题，请参考以下文章