Mes boutons ne passent pas à travers les éléments div quand ils sont cliqués, est-ce que quelqu'un sait ce que j'ai fait de mal?

Question

J'ai un problème de commutation à travers les éléments div. Le div de flux de compte et le div de page de publication n'a aucun affichage dans css. La console dit qu'il a du mal à comprendre addEventListener de null sur la ligne 22. Ceci est mon javascript pour l'affichage:

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

J'ai trois divs. Chacun dans un fichier html séparé. La div qui contient les boutons ne fait pas partie de la page d'accueil div. Je l'ai inclus juste au cas où je me suis trompé sur les boutons. La page d'accueil 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> 

L'alimentation du compte 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> 

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

Vous avez une faute de frappe dans votre bouton HTML:

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

L'ID doit être par défaut PageButton. Cela devrait régler vos problèmes.