时间戳

首页 > 解决方案 > 为什么我不能使用 javascript 将可见性属性更改为隐藏

javascript - 为什么我不能使用 javascript 将可见性属性更改为隐藏

问题描述

我正在使用 javascript，因此当用户按下按钮时，将通过更改 div 的可见性属性来显示/消失一个 div。它在 div 被隐藏并且我希望它出现时工作。但是，当我再次按下按钮时，它并没有像应有的那样隐藏。

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>

标签： javascripthtml

解决方案

这可能会解决您的问题。

我所做的改变，

  1. 我onclick从按钮中删除了。只要您click在 JavaScript 端注册了事件，就不需要它。
  2. 我修复了您的 HTML，因为您的标记不正确。_(您忘记关闭<script>标签，也忘记关闭第二个div标签。
  3. 我更改了脚本的逻辑以使其更具性能。

<!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>

推荐阅读