Javascript if statement with boolean

Question

Im trying to create a button that make my div element show or hide, for open and close it with the same button. I dont get why it does not works, when I click on the button nothing happens, can someone help me please?

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

Run your code: `SyntaxError: expected expression, got keyword 'if'"`. — Andy, Feb 05 '18 at 13:49
`console.log(div_aperto)` and you are missing a opening and closing `}` — epascarello, Feb 05 '18 at 13:49

dshukertjr · Answer 1 · 2018-02-05T13:50:26.873

2

You don't have the brackets for function statement and you don't need argument

function myFunction() {

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

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

edited Feb 05 '18 at 13:50

answered Feb 05 '18 at 13:49

dshukertjr

15,244
11
57
94

still will not work.... – epascarello Feb 05 '18 at 13:50
Did you get rid of the argument of the function? – dshukertjr Feb 05 '18 at 13:52
I am not the OP and you edited it after I said that... – epascarello Feb 05 '18 at 13:53
Solved, thank you guys! <3 – Domenico Schitti Feb 05 '18 at 14:01

score 2 · Answer 2 · answered Feb 05 '18 at 13:53

Beyond the missing {}, note your function accepts an argument, but your sending it nothing (myfunction()). This will cause the div_aperto to always be undefined when the function starts. If you want to reference the global drop the argument.

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

score 1 · Answer 3 · answered Feb 05 '18 at 13:51

It seems you missed the opening and closing brackets of the function definition.

I also linked a working fiddle, try it out. :)

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

Denys Séguret · Answer 4 · 2018-02-05T13:53:44.383

The problem is you're shadowing div_aperto in the declaration of your function. Its value is thus always undefined in the function.

Change

function myFunction(div_aperto)

to

function myFunction() {

You also need to add the braces around the function body.

Demonstration:

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

@epascarello I think the missing braces is just a too short paste — Denys Séguret, Feb 05 '18 at 13:50

score 0 · Answer 5 · answered Feb 05 '18 at 13:53

You need to put all the sentences of the myFunction between {}, also if you declare your div_aperto variable as global, you don't have to pass it as argument to the function:

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

It works, so I just needed to add { } to the function! I wasted so much time!! Thank you! — Domenico Schitti, Feb 05 '18 at 13:59

score -1 · Answer 6 · answered Feb 05 '18 at 13:52

-1

Simple. Remove your script code and add bellow script

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

answered Feb 05 '18 at 13:52

Vishal Suthar

72
4

It works, so I just needed to add { } to the function! I wasted so much time!! Thank you! – Domenico Schitti Feb 05 '18 at 13:59
Welcome....cheers – Vishal Suthar Feb 05 '18 at 14:00

Javascript if statement with boolean

6 Answers6