Игнорировать строку 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;
});