Javascript 我的按钮在单击时没有在div元素之间切换，有人知道我做错了什么吗？

很抱歉3.5年前提出了一个糟糕的问题。当我11岁的时候，我没有比这更清楚的了。

我在切换div元素时遇到问题。accountfeed div和postpage div在css中显示为none。控制台说它在理解第22行的addEventListener为null时遇到问题。这是我的javascript，用于显示：

const accountFeed = document.getElementById('accountFeed')
const accountFeedButton = document.getElementById('accountFeedButton')

const homePage = document.getElementById('homePage')
const homePageButton = document.getElementById('defaultPageButton')

const postPage = document.getElementById('tweetPage')
const postPageButton = document.getElementById('posts-button')

const hide = (item) => {
    item.style.display = 'none'
}
const show = (item) => {
    item.style.display = 'inline'
}

accountFeedButton.addEventListener('click', () => {
    alert('accountFeedButton')
    hide(homePage)
    hide(postPage)
    show(accountFeed)
})
homePageButton.addEventListener('click', () => {
    alert('homePageButton')
    hide(accountFeed)
    hide(postPage)
    show(homePage)
})
postPageButton.addEventListener('click', () => {
    alert('postPageButton')
    hide(homePage)
    hide(accountFeed)
    show(postPage)
})

我有三个div。每一个都在一个单独的html文件中。包含按钮的div不是主页div的一部分。我把它包括进来只是为了防止我把按钮弄乱了。主页分区：

<div id="wrapper">
    <button class="pageContent" id="defautPageButton">Home</button>
    <button class="pageContent" id="accountFeedButton">Account Feed</button>
    <button class="pageContent" id="posts-button">Post</button>
</div>
<div id="homePage" class="tabContent">
    <ul id="posts">
                             
    </ul>
</div>
<script src="page-loader.js"></script>

<link rel="stylesheet" href="style.css">
<div id="tweetPage" class="tabContent">
    <textarea class="post" rows="3"></textarea>
        <button id="post-a-comment">Post</button>
</div>
<script src="page-loader.js"></script>

家
帐户提要
邮递

帐户提要div：

<link rel="stylesheet" href="style.css">
<div id="accountFeed" class="tabContent">
    <p style="display: none">*</p>
    <ul id="posts">
         <li>Hello</li>
    </ul>
</div>

*

你好

贴子页分区：

<div id="wrapper">
    <button class="pageContent" id="defautPageButton">Home</button>
    <button class="pageContent" id="accountFeedButton">Account Feed</button>
    <button class="pageContent" id="posts-button">Post</button>
</div>
<div id="homePage" class="tabContent">
    <ul id="posts">
                             
    </ul>
</div>
<script src="page-loader.js"></script>

<link rel="stylesheet" href="style.css">
<div id="tweetPage" class="tabContent">
    <textarea class="post" rows="3"></textarea>
        <button id="post-a-comment">Post</button>
</div>
<script src="page-loader.js"></script>

邮递

您的按钮HTML中有一个输入错误：

<button class="pageContent" id="defautPageButton">Home</button>

主页

---

id应该是默认的页面按钮。这应该可以解决您的问题。

最好有一个可复制的JSFIDLE示例或其他示例，以便人们可以尝试。。我知道我至少不会费心去确定这是否是导致您出现问题的原因，但您有

defautPageButton

您想要的

defaultPageButton

，这肯定不会有帮助。这是在

Home

行中。我同意@Peter，

defautPageButton

应该是

defaultPageButton

，这可能导致它抛出错误。