how to change the display of div by js?

Question

For some reason that I do not know this time the browser does not want to render the code... basically I need to change the display: nome of div for display: blockthrough javascript.

botaoSticky = function(e) {
    e.target.style.display = "none"
    aparecerSticky()
}

const aparecerSticky = function(){
    const mySticky = document.getElementsByClassName('sticky')
    mySticky.style.display = "block";
}

 .sticky{
    display: none;
    background: rgb(42, 197, 211);
    height: 30vh;
    width: 90%;
    margin-top: 20px;

}

   <aside>
       <input type="button" value="botão sticky" class="botao" onclick=botaoSticky(event)>
       <div class="sticky"><p>meu sticky</p></div>
</aside> 

Answer 1

The method .getElementsByClassName returns a list of elements, type array, and not only an element. For this to work you must do document.getElementsByClassName('sticky')[0] or document.querySelector('.sticky')

const botaoSticky = function(e) {
  e.target.style.display = "none";
  aparecerSticky();
}

const aparecerSticky = function() {
  const mySticky = document.querySelector('.sticky');
  mySticky.style.display = "block";
}

.sticky {
  display: none;
  background: rgb(42, 197, 211);
  height: 30vh;
  width: 90%;
  margin-top: 20px;
}

<aside>
  <input type="button" value="botão sticky" class="botao" onclick=botaoSticky(event)>
  <div class="sticky">
    <p>meu sticky</p>
  </div>
</aside>