Игнорировать строку Javascript, если элемент отсутствует на странице, и переходить к следующей строке?

Работаю над веб-приложением django и столкнулся с проблемой, связанной с моим javascript. Веб-приложение представляет собой несколько различных html-страниц, поэтому элементы, которые ищет мой js-код, присутствуют на некоторых страницах, но не на других. Если вторая строка не присутствует на текущей странице, сценарий перестает выполняться, и конечная функция не работает. У меня есть страница "план", где можно добавить дополнительные теги к своему плану, а затем отдельная страница для фильтрации результатов. Если я нахожусь на странице плана, то элемент "#filterBtn" отсутствует, поэтому моя функция createNewTagField не работает. Если я поменяю местами эти две строки кода, произойдет обратное. Я не могу заставить их работать оба, поскольку элементы, которые ищет javascript, находятся на двух разных страницах и не присутствуют одновременно

Вот строки, вызывающие проблемы.

document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#mobile-menu').onclick = toggleMobileMenu;
    document.querySelector('#filterBtn').onclick = toggleFiltersMenu;
    document.querySelector('#addTag').onclick = createNewTagField;
    
});

Я переставил строки кода, и это только исправляет проблему на одной странице, в то время как на другой странице проблема остается. Я думаю, что это должно быть что-то вроде if null, затем перейти к следующей строке, но не смог найти правильный код в результате поиска.

Если у вас не больше пары тегов/строк, то я бы использовал оператор try-catch для игнорирования строки кода, если элемент отсутствует на странице:

try {
// This line of code may throw an error if the element is not found
const element = document.querySelector('.my-element');
// Do something with the element...
} catch (error) {
// If an error is thrown, ignore it and continue with the next line
console.log(error); // Output: Error: The element is not found
}

// This line of code will be executed even if the element is not found
console.log('Element not found. Trying again')

Сделайте это для каждого из сценариев.

Вы можете проверить истинность в JavaScript. https://developer.mozilla.org/en-US/docs/Glossary/Truthy

Поскольку отсутствие элемента в DOM приведет к null, это работает довольно хорошо и хорошо читается.

document.addEventListener('DOMContentLoaded', function() {
    
    const mobileMenu = document.querySelector('#mobile-menu');
    const filterBtn = document.querySelector('#filterBtn');
    const addTag = document.querySelector('#addTag');

    if (mobileMenu) mobileMenu.onclick = toggleMobileMenu;
    if (filterBtn) mobileMenu.onclick = toggleFiltersMenu;
    if (addTag) mobileMenu.onclick = createNewTagField;
    
});
Вернуться на верх