Блог

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

Моя цель — иметь возможность скрыть мой div после отправки и избежать ошибки classist of null. Приветствуются любые идеи. Спасибо

     // object
 const onePage = {
          pages: [], // property to save pages in
          show: new Event('show'),
          init: function(){
            onePage.pages = document.querySelectorAll('.page');
            //listener for show event, calling function
            onePage.pages.forEach((pg)=>{
              pg.addEventListener('show', onePage.pageShown);
            })      
            //listener for click event, calling function
            document.querySelectorAll('.nav-t').forEach((link)=>{
                  link.addEventListener('click',onePage.nav);
            })
            // showing on which page we are viewing 
            history.replaceState({}, 'Reporting', '#Reporting');
            window.addEventListener('hashchange', onePage);
          },
          nav: function(ev){
            ev.preventDefault();  
            let currentPage = ev.currentTarget.getAttribute('data-target');
            document.querySelector('.active').classList.remove('active');
            document.getElementById(currentPage).classList.add('active'); // where the error occurs
            history.pushState({}, currentPage, `#${currentPage}`);
            document.getElementById(currentPage).dispatchEvent(onePage.show);
          },
 }
 document.addEventListener('DOMContentLoaded', onePage.init);
  

Присвоите результат переменной и сначала проверьте, имеет ли она значение null.

 nav: function(ev) {
  ev.preventDefault();
  let currentPage = ev.currentTarget.getAttribute('data-target');
  let curPage = document.getElementById(currentPage);
  if (curPage) {
    document.querySelector('.active').classList.remove('active');
    curPage.classList.add('active'); // where the error occurs
    history.pushState({}, currentPage, `#${currentPage}`);
    curPage.dispatchEvent(onePage.show);
  }
},