How do I hide children inside a div element when button is pressed? (without hidding parent)

I have this sidebar in my html file that I want to have all sorts of content in it. However, I can't really fit it all inside. I want to hide the default children inside the parent div side-bar. At first I tried making a loop that goes through all the children and changes their style to style.display = 'none';. That didn't work. I got the error message: code.js:128 Uncaught TypeError: Cannot set property 'display' of undefined

My current code to do my goal is (in javascript):

document.getElementById("other-stats").addEventListener("click",function()  {          for(var i = 0 ; i < document.getElementById("side-bar").children.length ; i++)          {              document.getElementById("side-bar").lastChild.style.display = 'none';          }  });  

I appreciate any answer that anybody can give, but I'm not using Jquery in my code, so I was hoping for some javascript answers.

my html:

        <div id="side-bar">              <div id="character-view-section">                  <center>                      <img style="width:150px ; height:200px ; margin-top:50px ;" alt="character">                  </center>              </div>              <div id="stats-section">                  <p id="health" style="border:solid 2px crimson ; background-color: crimson ;" class="stats">                      health: 100                  </p>                  <p id="stamina" style="border:solid 2px rgb(38, 168, 21) ; background-color: rgb(38, 168, 21) ;" class="stats">                      stamina: 50                  </p>                  <p id="weapon" style="border:solid 2px rgb(20, 197, 220); ; background-color: rgb(20, 197, 220) ;" class="stats">                      weapon: NOT DETERMINED                  </p>               </div>               <div id="inventory-section">                 </div>                  <center>                      <button id="use-item">                          use item                      </button>                  </center>                  <button id="other-stats">                      other stats                  </button>          </div>  

This is the entire side bar div that I made. Everything inside here, other than the bar, is what I would like to hide in order to place other elements.

https://stackoverflow.com/questions/67238213/how-do-i-hide-children-inside-a-div-element-when-button-is-pressed-without-hid April 24, 2021 at 08:23AM