Apologies for the poorly worded question 3.5 years ago. I was just a naive 11-year-old back then.
I'm currently facing an issue with toggling between different div elements. The account feed div and the post page div have a display set to none in the CSS. The console is indicating difficulty understanding 'addEventListener' of null on line 22. Here is my JavaScript code for handling the display:
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 separate divs, each in its own HTML file. The div containing the buttons isn't part of the home page div. I've included it in case there are any issues with the buttons. Here's the markup for 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>