Вопрос:
Поэтому по какой-то причине он возвращается как Cannot read свойство ‘addEventListener’ null в моей консоли. Попытка заставить работать вкладки. Не могу найти, что не так с кодом. Любая помощь будет оценена. Или, если вы могли бы дать мне лучший способ сделать вкладки с помощью JS.
Это мой код Javascript
function onTabClick(event) { let activeTabs = document.querySelectorAll(«.active»); activeTabs.forEach(function(tab) { tab.className = tab.className.replace(«active», «»); }); // activate new tab and panel event.target.parentElement.className += » active»; document.getElementById(event.target.href.split(«#»)[1]).className += » active»; } var element = document.getElementById(«nav-tab»); element.addEventListener(«click», onTabClick, false);And this is my HTML <div class=»container»> <!— Tab panes —> <div class=»tab-content»> <div class=»tab-pane active» id=»home»> <h4>Home Panel Content</h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iure quos cum, saepe reprehenderit minima quasi architecto numquam nesciunt dicta. Qui excepturi recusandae vitae maiores, inventore sequi? Rerum, odio omnis. </p> </div> <div class=»tab-pane» id=»profile»> <h4>Profile Panel</h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem iure quos cum, saepe reprehenderit minima quasi architecto numquam nesciunt dicta. Qui excepturi recusandae vitae maiores, inventore sequi? Rerum, odio omnis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias distinctio, tempora incidunt aliquid adipisci, minus rerum optio libero quae provident sed at dignissimos, quia nostrum! Fuga dolorum quia hic magni. </p> </div> <div class=»tab-pane» id=»messages»> <h4>Messages Panel</h4> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat quos, at qui aspernatur minus animi hic sunt necessitatibus incidunt molestiae reprehenderit ratione neque odit ipsa. Nemo laborum consequatur adipisci beatae! </p> </div> <div class=»tab-pane» id=»settings»> <h4>Settings Panel</h4> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima possimus sed odit iste vitae, magnam amet illum laudantium ea! Fugiat consectetur consequuntur qui eos obcaecati sequi ipsam repellat vero voluptate. </p> </div> </div> <!— Tabs —> <ul id=»nav-tab» class=»nav»> <li class=»active»><a href=»#home»>Home</a></li> <li><a href=»#profile»>Profile</a></li> <li><a href=»#messages»>Messages</a></li> <li><a href=»#settings»>Settings</a></li> </ul> </div>Лучший ответ:
Проблема в том, что ваш JavaScript работает до того, как браузер завершил создание этих HTML-элементов. Это потому, что ваш JavaScript, вероятно, расположен над вашим HTML-кодом. Есть два способа это исправить. Одним из них является перемещение вашего JavaScript непосредственно перед закрывающим </body>, или лучший способ – обернуть его в вызов document.addEventListener(«DOMContentLoaded», function() {…}); вот так:
document.addEventListener(«DOMContentLoaded», function() { document.querySelectorAll(«#nav-tab a»).forEach(function(element) { element.addEventListener(«click», onTabClick, false); }); });
Вторая проблема, которую я заметил после исправления первой, заключается в том, что поскольку ваш обработчик событий применяется к элементу <ul>, когда вы попадаете в document.getElementById(event.target.href.split(«#»)[1]).className += » active»; , вы заметите, что если вы нажмете на элемент <ul> а не на одну из ссылок, вы получите сообщение об ошибке ” Cannot read property ‘split’ of undefined. Вместо этого вы хотите применять приемник событий только к ссылкам, поэтому я обернул его вызовом document.querySelectorAll, который даст вам только ссылки, которые вы можете зациклить и добавить прослушиватели событий.
