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

Question

抱歉 3.5 年前的问题。我 11 岁的时候什么都不知道。

我在切换 div 元素时遇到问题。帐户供稿 div 和 post 页面 div 在 css 中的 none 上显示。控制台说它无法理解第 22 行的 null 的 addEventListener。这是我的 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:

<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>

帐户供稿 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>

post 页面 div:

<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>

Answer 1

你的按钮有错字HTML:

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

ID 应该是默认PageButton。这应该可以解决您的问题。

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

My buttons are not switching through the div elements when clicked, does anyone know what I did wrong?

html

javascript

css

display