Question

好的，所以我正在尝试编写一个简单的显示/隐藏内容按钮，但我想使用两个不同的功能来显示和隐藏内容。现在它隐藏得很好，但它不会重新显示。

<html>
 <head>
 <title>Test</title>

 <script type="text/javascript">
  function hidecontent(){
   document.getElementById("content").style.display = "none";
   document.getElementById("hidebutton").value = "+";
   document.getElementById("hidebutton").onclick = showcontent();
  }

  function showcontent(){
   document.getElementById("content").style.display = "block";
   document.getElementById("hidebutton").value = "-";
   document.getElementById("hidebutton").onclick = hidecontent();
  }
 </script>

 <style type="text/css">
  #content{
   border: 1px solid #003333;
   background-color: #000033;
   color: #ffffff;
   height: 500px;
   width: 500px;
   text-align: center;
   display: block;
  }

  #hidebutton{
   border: 1px solid #003333;
   background-color: #000033;
   color: #ffffff;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
  }
 </style>

 </head>

 <body>
  <form>
   <input id="hidebutton" type="button" value="-" onclick="hidecontent()" />
  </form>

  <?php
   echo '<div id="content">Hello world!</div>';
  ?>
 </body>
</html>

Answer 1

这样做

document.getElementById("hidebutton").onclick = hidecontent;

Answer 2

不需要两个功能，你也可以这样做：

function show_hide(){
    var ds = document.getElementById("content");
    var btn = document.getElementById("hidebutton");

    if (ds.style.display === 'block'){
       ds.style.display = 'none';
       btn.value = '+';
    }
    else {
       ds.style.display = 'block';
       btn.value = '-';
    }
}

稍后您可以像这样调用函数：

var btn = document.getElementById("hidebutton");
btn.onclick = show_hide;

Answer 3

document.getElementById（“hidebutton”）。onclick = showcontent ; // remove（）

document.getElementById（“hidebutton”）。onclick = hidecontent ; // remove（）

我想使用javascript更改按钮的onclick，但它不起作用

3 个答案: