Как отключить выполнение функции Javascript на других страницах?

Question

[Александр Ткаченко]

Здравствуйте, уважаемые разработчики!

Вопрос простой)

На главной странице есть табы на чистом javascript.
При переходе на другую сраницу выдаёт такую ошибку в консоли:

Ошибка:

spoiler

Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')

Я понимаю, что отсутствует элемент. Но как отключить работу этой функции на других страницах, чтобы могли выполняться последующие функции?

Код Javascript:

spoiler

hideTabContent(1)

    function showTabContent(b) {
        if (tabContent[b].classList.contains('hide')) {
            hideTabContent(0);
            tabContent[b].classList.add('show');
            tabContent[b].classList.remove('hide');
            tab[b].classList.add('active');
        } 
    }

    info.addEventListener('click', function(event) {
        let target = event.target;
        if (target.className == 'info-header-tab') {
            for (let i = 0; i < tab.length; i++) {
                if (target == tab[i]) {
                    showTabContent(i);
                    break;
                }
            }
        }
    })

Answer 1

[Сергей Соколов]

Но как отключить работу этой функции на других страницах, чтобы могли выполняться последующие функции?

Варианты:

1. проверять, есть ли элемент, прежде, чем что-то с ним делать if (element) { /* что-то с ним делаем */ }
   
2. проверять, на какой странице находимся

   if (window.location.pathname === "/contacts/form.html") { /* тут всякая магия */ }

   
   
3. обернуть в

   try { /* здесь код который вызывает ошибки */ } catch() {}

   
   
   

Comments

[Everybody_Lies]

4. Подключать на страницах только необходимые функции

[Сергей Соколов]

Everybody_Lies, что вы, об этом не может быть и речи! : ) (в данном контексте)

[Александр Ткаченко]

Спасибо вам большое! Ваш вариант проверил, тоже работает!

Answer 2

[andand44]

Нужно проверять на существование элемент и потом уже обращаться к нему

if ( document.querySelectorAll(".info-header-tab").length ) {
    alert("Элемент найден!");
}

Comments

[Mikhail Osher]

Можно упростить до

if (document.querySelector('.info-header-tab')) { ... }

[Александр Ткаченко]

Спасибо большое за помощь! Помогло)))

Answer 3

[Hecktosaurus]

document.querySelector('#info')?.addEventListener('click', function(event){
	<...>
});

Или более совместимый вариант

document.querySelectorAll('.info-header-tab').forEach(function(el, ind){
	el.addEventListener('click', function(event){
		<...>
	})
});