Why can't I use javascript to change the visibility property to hidden

Question

I'm using javascript, so that when a user presses a button, a div will appear/disappear by changing the visibility property of the div. It works when the div is hidden and I want it to appear. However, when I presses the button again, it does not become hidden as it should.

document.getElementById("SmileyButton").addEventListener("click", getSmileys);

function getSmileys() {
  var button = document.getElementById("SmileyDiv").style.visibility = 'visible';
  // document.getElementById("SmileyDiv").style.visibility = 'visible';
  if (button.visibility == 'hidden') {
    button.visibility = 'visible'
  } else {
    button.visibility = 'hidden'
  }
}

.enterPostBackground {
  background-color: gainsboro;
  width: 400px;
  height: 50px;
}

#SmileyDiv {
  height: 80px;
  width: 160px;
  background-color: grey;
  overflow: scroll;
  visibility: hidden;
}

<br>
<br>
<div id="SmileyDiv"></div>
<div class="enterPostBackground">
  <button class="test" id="SmileyButton" style="font-size: 30px;float:left; " type="button" onclick="getSmileys()">&#128515</button>
</div>

Answer 1

There are a couple of problems there.

• You're assigning the result of document.getElementById("SmileyDiv").style.visibility = 'visible'; to button. The result of an assignment expression is the value that was assigned, so button will be "visible".
• Then you're trying to use a visibility property on button, but strings don't have that property. You probably meant to assign the result of document.getElementById("SmileyDiv") to button, but even then, you'd need button.style.visibility, not just button.visibility.
• The style property only reflects the element's directly-assigned style information, not anything applied to it by CSS. Your div doesn't have visibility: xxx in its style attribute, it inherits it via CSS. You need to use getComputedStyle to get the computed style of the div.
• You're using addEventListener and an onclick, so your function is getting called twice. Just use addEventListener.
• button is an odd variable name for a div. :-)

See comments:

document.getElementById("SmileyButton").addEventListener("click", getSmileys);

function getSmileys() {
  // It's a div, not a button
  var div = document.getElementById("SmileyDiv");
  // ** Get the *computed* style of the div
  var style = getComputedStyle(div);
  if (style.visibility !== 'hidden') {
    div.style.visibility = 'hidden'
  } else {
    div.style.visibility = 'visible'
  }
}

.enterPostBackground {
  background-color: gainsboro;
  width: 400px;
  height: 50px;
}

#SmileyDiv {
  height: 80px;
  width: 160px;
  background-color: grey;
  overflow: scroll;
  visibility: hidden;
}

<br>
<br>
<div id="SmileyDiv"></div>
<div class="enterPostBackground">
  <button class="test" id="SmileyButton" style="font-size: 30px;float:left; " type="button">&#128515</button>
</div>

Answer 2

You are checking for button.visibility. Your button does not have a visibility attribute. You should check for button.style.visibility. You are also assigning the click listener twice, once in JS and the other in your HTML. This would cause the hide/show process to be reversed everytime.

var button = document.getElementById("SmileyButton");
button.addEventListener("click", getSmileys);

function getSmileys() {
  var smileyDiv = document.getElementById("SmileyDiv");
  if(smileyDiv.style.visibility == 'hidden') {
    smileyDiv.style.visibility = 'visible'
  } else {
    smileyDiv.style.visibility = 'hidden'
  }
}

.enterPostBackground {
  background-color: gainsboro;
  width: 400px;
  height: 50px;
}

#SmileyDiv {
  height: 80px;
  width: 160px;
  background-color: grey;
  overflow: scroll;
}

<br>
<br>
<div id="SmileyDiv"></div>
<div class="enterPostBackground">
  <button class="test" id="SmileyButton" style="font-size: 30px;float:left;visibility:hidden" type="button">&#128515</button>
</div>

Answer 3

This may solve your problem.

Changes I did,

1. I removed the onclick from the button. You don't need it as long as you have registered the click event in the JavaScript side.
2. I fixed your HTML as you had incorrect markup. _(You forgot to close the <script> tag, as well you forgot to close the second div tag.
3. I change the logic of your script to make it more performant.

<!DOCTYPE html>
<html>
<head>
      <style>
          .enterPostBackground {
              background-color: gainsboro;
              width: 400px;
              height: 50px;
          }

          #SmileyDiv {
              height: 80px;
              width: 160px;
              background-color: grey;
              overflow: scroll;
              visibility: hidden;
          }

      </style>
</head>

<body>
    <br>
    <br>
    <div id="SmileyDiv"></div>
    <div class="enterPostBackground">

        <button 
            class="test" 
            id="SmileyButton" 
            style="font-size: 30px;float:left;"
            type="button"
          >&#128515</button>
     </div>
</body>
</html>
<script>
// I get the SmileyDiv here. This is because it runs only once, and makes 
// your script more performant.
var button = document.getElementById("SmileyDiv");
document.getElementById("SmileyButton").addEventListener("click", getSmileys);

// I set the initial visibility status here
button.style.visibility = 'visible';

function getSmileys() {
    // You had forgot to add the `.style` in the button property. That's 
    // why the button didn't worked properly.
    if (button.style.visibility === 'hidden') {
        button.style.visibility = 'visible'
    } else {
        button.style.visibility = 'hidden'
    }
}
</script>