I have 4 icons in my menu bar and when I press the fa-plus-square I want to hide the div #addPost. I believe my JS is fine and cannot locate the issue here

function showPost(){
    let add = document.getElementsById("addPost")
    if (add.style.display === "none" ){
        add.style.display = "block"
    } else {
        add.style.display = "none"
    }
}

        <ul class="icons"> 
            <li>
                <i class="fas fa-home" style="color: black;"></i>
            </li>
            <li>
                <i class="fas fa-inbox"></i>
            </li>
            <li>
                <i class="far fa-plus-square" onclick="showPost()"></i>
            </li>
            <li>
                <i class="far fa-heart"></i>
            </li>
        </ul>
        
 <div id="addPost" >
        <div class="title">Create new post
            <i class="fas fa-times"></i>
        </div>
        <div class="name">
            <input type="Name" placeholder="Username" required>
        </div>
        <div class="post">
            <textarea placeholder="What's on your mind?" ></textarea>
        </div>
        <div class="comment">
            
        </div>
    </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

It should be getElementById not getElementsById! Remove the 's' at the end of element.