Onclick function on font awesome icon

Question

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>

Answer 1

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