Question

我试图创建一个按钮，使我的div元素显示或隐藏，用同一个按钮打开和关闭它。我不明白为什么它不起作用，当我点击按钮没有任何反应时，有人可以帮助我吗？

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    width: 500px;
    height: 500px;
    background-color: lightblue;
    display: none;
}
</style>
</head>
<body>

<p>Click the "Try it" button to set the display property of the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>

var div_aperto = false;

function myFunction(div_aperto) 

   if (div_aperto) { 
       div_aperto = false;
       document.getElementById("myDIV").style.display = "none"; }   
   
   else { div_aperto = true;
       document.getElementById("myDIV").style.display = "block"; } 
      
</script>

</body>
</html>

Answer 1

你没有功能陈述的括号，你不需要参数

function myFunction() {

   if (div_aperto) { 
       div_aperto = false;
       document.getElementById("myDIV").style.display = "none"; }   

   else { div_aperto = true;
       document.getElementById("myDIV").style.display = "block"; } 
}

Answer 2

除了缺少的{}之外，请注意您的函数接受一个参数，但您不发送任何参数（myfunction()）。这将导致函数启动时始终未定义div_aperto。如果你想引用全局删除参数。

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    width: 500px;
    height: 500px;
    background-color: lightblue;
    display: none;
}
</style>
</head>
<body>

<p>Click the "Try it" button to set the display property of the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>

var div_aperto = false;

function myFunction()  {
   if (div_aperto) { 
       div_aperto = false;
       document.getElementById("myDIV").style.display = "none"; }   
   
   else { div_aperto = true;
       document.getElementById("myDIV").style.display = "block"; } 
}  
</script>

</body>
</html>

Answer 3

似乎你错过了函数定义的开始和结束括号。

我还联系了一个工作小提琴，尝试一下。：）

<!DOCTYPE html>
<html>

  <head>
    <style>
      #myDIV {
        width: 500px;
        height: 500px;
        background-color: lightblue;
        display: none;
      }

    </style>
  </head>

  <body>

    <p>Click the "Try it" button to set the display property of the DIV element:</p>

    <button onclick="myFunction()">Try it</button>

    <div id="myDIV">
      This is my DIV element.
    </div>

    <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

    <script>
      var div_aperto = false;

      function myFunction(div_aperto) {

        if (div_aperto) {
          div_aperto = false;
          document.getElementById("myDIV").style.display = "none";
        } else {
          div_aperto = true;
          document.getElementById("myDIV").style.display = "block";
        }

      }

    </script>

  </body>

</html>

https://jsfiddle.net/xmzh92z9/1/

Answer 4

问题是你在函数声明中隐藏div_aperto。因此，它的值在函数中始终为undefined。

更改

function myFunction(div_aperto)

到

function myFunction() {

您还需要在函数体周围添加大括号。

演示：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    width: 500px;
    height: 500px;
    background-color: lightblue;
    display: none;
}
</style>
</head>
<body>

<p>Click the "Try it" button to set the display property of the DIV element:</p>
<script>

var div_aperto = false;

function myFunction() {

   if (div_aperto) { 
       div_aperto = false;
       document.getElementById("myDIV").style.display = "none"; }   
   
   else { div_aperto = true;
       document.getElementById("myDIV").style.display = "block"; } 
      }
</script>
<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>



</body>
</html>

＆＃13;

Answer 5

您需要将myFunction的所有句子都放在{}之间，如果您将div_aperto变量声明为全局，则不必将其作为参数传递功能：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    width: 500px;
    height: 500px;
    background-color: lightblue;
    display: none;
}
</style>
</head>
<body>

<p>Click the "Try it" button to set the display property of the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>

var div_aperto = false;

function myFunction() {
   if (div_aperto) { 
       div_aperto = false;
       document.getElementById("myDIV").style.display = "none"; 
   } else { 
      div_aperto = true;
      document.getElementById("myDIV").style.display = "block"; 
   }    
}
</script>

</body>
</html>

＆＃13;

Answer 6

简单。删除脚本代码并添加以下脚本

<script>

var div_aperto = false;

function myFunction() 
{
   if (div_aperto) { 
       div_aperto = false;
       document.getElementById("myDIV").style.display = "none"; }   

   else { div_aperto = true;
       document.getElementById("myDIV").style.display = "block"; } 
      }
</script>

带有布尔值的Javascript if语句

6 个答案: