单页应用程序classList问题

Question

我正在按照本教程创建自己的第一个SPA和即时消息：https://www.youtube.com/watch?v=wlVmmsMD28w&t=846s，只是我发现它是最新的且内容最丰富。

如果我喜欢他，一切都会正常，但是只要将其更改为html，我就会在按下时立即收到此错误（Uncaught TypeError：无法读取null的属性'classList'）锚标签。

// object
const app = {
pages: [], // property to save pages in
show: new Event('show'),
init: function() {
    app.pages = document.querySelectorAll('.page');
    //listener for show event, calling function
    app.pages.forEach((pg)=> {
        pg.addEventListener('show', app.pageShown);
    })

    //listener for click event, calling function
    document.querySelectorAll('.nav-link').forEach((link)=>{
        link.addEventListener('click', app.nav);
    })
    // showing on which page we are in the tab
    history.replaceState({}, 'Home', '#home');
    // handling the "back" button
    window.addEventListener('popstate', app.poppin);
},

nav: function(ev){
    ev.preventDefault();
    let currentPage = ev.target.getAttribute('data-target');
    document.querySelector('.active').classList.remove('active'); ////////// THE LINE ERROR IS APPEARING AT
    document.getElementById(currentPage).classList.add('active');
    console.log(currentPage);
    history.pushState({}, currentPage, '#${currentPage}');
    document.getElementById(currentPage).dispatchEvent(app.show);
},
pageShown: function(ev){
    console.log('Page', ev.target.id, 'just shown');
},
poppin: function(ev){
    console.log(location.hash, 'popstate event');
}
}
document.addEventListener('DOMContentLoaded', app.init);

这是我的html代码：

<div class="page selected" id="home">
<div id="cell_1">
    <a href="#" data-target="recipe" class="nav-link">
        <img id="mainPic" src="./pictures/thai.jpg">
    </a>
</div>
</div>
<div class="page" id="recipe">
<p>a</p>
</div>

有人可以尝试帮助我为什么会这样吗？顺便说一下，即时通讯也无法重定向到其他页面。

Answer 1

document.querySelector('.active').classList.remove('active');行正在抛出，因为此部分document.querySelector('.active')正在返回null然后在.classList而不是在匹配元素上调用null。

您可以通过在调用尝试删除active类之前检查是否返回任何内容来解决此问题。

// first look for a element with the class active
const activeElement = document.querySelector('.active');
// if found then remove the 'active' class
activeElement && activeElement.classList.remove('active');

MDN's querySelector文档可以为您提供更多的见解。

Answer 2

主要问题隐藏在“当前页面”中。因为它总是为我返回null，所以我开始在这里进行挖掘，最后发现我所需要的只是获取.currentTarget而不是“ nav”函数中的.target。

过去如何：

let currentPage = ev.Target.getAttribute('data-target');

必须如何：

let currentPage = ev.currentTarget.getAttribute('data-target');

后退按钮仍在挣扎，但是至少有主要的工作。感谢您的帮助。