Одинаковые элементы DOM на разных страницах HTML

Question

Я думаю, что мой вопрос немного глуп, но у меня есть проблема. Есть несколько html-страниц, например: index.html, rooms.html и т. Д. И файл main.js со скриптами для всех.html-страниц. Проблема в том, что у меня есть переменные, как

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

и некоторые функции для работы с этим HTML-элементом. Но этот элемент есть только на странице index.html, и когда я нахожусь на странице rooms.html, у меня возникает ошибка, поскольку HTMLelement не определен, а другой сценарий не существует (это важно, так как некоторые HTML-файлы создаются сценарием). Также В main.js у меня есть сценарии для всех страниц, поэтому я не могу создать новый файл.js... Итак, каков наилучший способ separate скрипты для разных html страниц?

Answer 1

Здесь у вас есть несколько способов решить проблему

Создайте отдельный скрипт для каждой страницы

• rooms.html -> rooms.js
• index.html -> 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>