DOM 由于多个 HTML 文件而引发错误

Question

我正在尝试使用 javascript 创建一个简单的食谱应用程序。 我有 3 个 HTML 文件：index.html、create.html、edit.html 和 2 个 JS 文件。

我有几个 DOM 元素。一个在 index.html，两个在编辑，两个在创建。 现在当我打开 index.html 时出现错误：

recipe.js:14 Uncaught TypeError: Cannot set property 'value' of null

这里的问题是错误的代码是关于 edit.html 而不是 index.html。 edit.html

同样的问题

Uncaught TypeError: Cannot read property 'appendChild' of null
at recipe.js:55

recipe.js 代码 55 是关于 index.html，而不是 edit.html。

有没有办法在使用 DOM 时定位 HTML 文件。

document.getElementById("edit-body").value = getRecipeBody();

我希望上面的代码仅适用于 edit.html，而不适用于 index.html 或 create.html。

edit-body 是一种仅在 edit.html 上的表单，不在索引或 create.html

上

document.getElementById('recipes').appendChild(recipeEl)

我希望此代码用于 index.html 而不是用于其他 HTML 文件，因为这些文件上没有#recipes ID。 #recipes 仅在 index.html

我正在使用 localStorage。

Answer 1

window.location.pathname 会让您执行特定路径的代码。

if(window.location.pathname === '/edit.html') {
  document.getElementById("edit-body").value = getRecipeBody();
}

请注意，如果您默认加载 index.html（如 http://localhost:80/ as opposed to http://localhost:80/index.html），那么路径名将只是 /，因此请确保您处理这两个，即:

if(window.location.pathname === '/index.html' || window.location.pathname === '/') {
  document.getElementById('recipes').appendChild(recipeEl)
}

更好的方法是对其进行防御性编码。在针对它的 运行 函数之前检查您获取的元素是否存在。例如：

var editEl = document.getElementById("edit-body");
if (editEl) {
  editEl.value = getRecipeBody();
}

您也可以只在 index.html 上加载 index.js，在 edit.html 上加载 edit.js，等等，尽管您想要拆分将所有共享函数输出到一个单独的（公共）JS 文件中。