Question

我认为我的问题有点愚蠢，但我有一个问题。有一些html页面，例如：index.html和rooms.html等...还有一个main.js文件，其中包含所有.html页面的脚本。问题是我有一个变量，比如

const HTMLelement = document.querySelector('.className');

以及一些使用此HTMLelement的函数。但是，这个元素只在index.html页面上，当我在room.html页面上时，我有一个错误，因为没有定义HTMLelement而其他脚本不存在（重要的是，脚本会导致一些html构建。）另外，在main.js我有所有页面的脚本，所以我不能创建新的.js文件... 那么，对于不同的html页面，separate脚本的最佳方法是什么？

Answer 1

这里有几种解决问题的方法

为每个页面创建特定的单独脚本

rooms.html - ＆gt; rooms.js
index.html - ＆gt; index.js

在执行操作之前检查节点是否存在

if(document.querySelectorAll('.className').length == 0){
     // do things
}

在您执行某项操作之前检查当前页面

if(window.location.pathname.indexOf('rooms.html') != -1){
     // do things
}

希望有所帮助

Answer 2

在尝试使用元素之前，始终验证元素是否存在。

const oneEl = document.querySelector('.one');
if (oneEl) {
  oneEl.setAttribute('title', 'This is one');
}

// Below I am trying to get an element by the wrong class name.
const twoEl = document.querySelector('.two');
if (twoEl) {
  // This code will not run
  twoEl.setAttribute('title', 'This is two');
}

<div class="one">One</div>
<div class="too">Two</div>

不同HTML页面上的相同DOM元素

2 个答案: