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

Question

Sorry for the bad question 3.5 years ago. I didn't know any better when I was 11.

I have a problem switching through the div elements. The account feed div and the post page div has a display on none in css. The console says that it has trouble understanding addEventListener of null on line 22. This is my javascript for the displaying:

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

I have three divs. Each one in a seperate html file. The div that contains the buttons is not part of the home page div. I included it just in case I messed up on the buttons. The home page 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>

The account feed 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>

The post page 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

You have a typo in your button HTML:

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

The id should be default PageButton. This should fix your problems.