hide/show html div with javascript

Question

my question hasn't already been asked because i don't want to know how i can hide/show a div element in html, but i would like to know why my method doesn't works. My javascript functions are executed even though i used "onclick" event.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>show&hide</title>
    <link rel="stylesheet" type="text/css" href="stile.css" />
  </head>
  <body>
    <button id="p1">show</button>
    <button id="p12">hide</button>
    <div id="scritta" class="hiddendiv">text to show</div>
    <script type="text/javascript">
      function show() {
        document.getElementById('scritta').className='visiblediv'; 
      }

      function hide() {
        document.getElementById('scritta').className='hiddendiv'; 
      }

      function inizializza() {
        var p1 = document.getElementById("p1");
        p1.onclick = show();
        var p2 = document.getElementById("p2");
        p2.onclick = hide();
      }

      window.onload= inizializza;
    </script>
  </body>
</html>

this is my css class:

.hiddendiv {
   display:none;
}
.visiblediv {
   display:block;
}

your inizializza() function is being called or not???

Kartikeya Khosla
– Kartikeya Khosla

2014-08-02 10:29:51 +00:00
Commented Aug 2, 2014 at 10:29 — Kartikeya Khosla
– Kartikeya Khosla, Commented Aug 2, 2014 at 10:29
yes, it's called with "window.onload" method

Tommymaso
– Tommymaso

2014-08-02 18:25:50 +00:00
Commented Aug 2, 2014 at 18:25 — Tommymaso
– Tommymaso, Commented Aug 2, 2014 at 18:25

Robby Cornelissen · Accepted Answer · 2014-08-02 10:35:40Z

1

There are a couple of issues in your code:

The ID for your second button should be p2 instead of p12.
You have to assign your event handlers like this
p1.onclick = show;
instead of like this
p1.onclick = show();

Adding the brackets will execute the method, instead of binding it as an event handler.

Here's a fiddle.

answered Aug 2, 2014 at 10:35

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tommymaso Over a year ago

thanks, it's works with your suggestion. I didn't know this function of the brackets...

jochen · Accepted Answer · 2014-08-02 10:32:15Z

0

The problem is that your second button has id "p12", but in the JavaScript code you are searching for an element with id "p2". An easy way to find such bugs is to use the developer console found in many browsers (e.g. in the menu "Developer > JavaScript Console" in Google Chrome). For your code, the console shows the following error message:

Uncaught TypeError: Cannot set property 'onclick' of null

together with an indication that the problem occurs on line 22 of your code.

answered Aug 2, 2014 at 10:32

jochen

3,9602 gold badges42 silver badges55 bronze badges

Comments

Victor · Accepted Answer · 2014-08-02 10:32:56Z

0

I see in your code you are searching an element with id=p2, but you have this html <button id="p12">hide</button> try to change it to <button id="p2">hide</button>

answered Aug 2, 2014 at 10:32

Victor

1

Comments

Eugene Obrezkov · Accepted Answer · 2014-08-02 10:35:49Z

0

The problem in p1.onclick = show(). You don't need to call a function, so fixed variant:

p1.onclick = show;
p2.onclick = hide;

Or use anonymous functions:

p1.onclick = function() {
    show();
}
p2.onclick = function() {
    hide();
}

And better use addEventListener - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener.

answered Aug 2, 2014 at 10:35

Eugene Obrezkov

2,9962 gold badges19 silver badges35 bronze badges

Comments

sasha_gud · Accepted Answer · 2014-08-02 10:36:50Z

0

Change inizializza to this one:

function inizializza() {
   var p1 = document.getElementById("p1");
   p1.onclick = show;
   var p2 = document.getElementById("p2");
   p2.onclick = hide;
}

and buttons definition to the following:

<button id="p1">show</button>
<button id="p2">hide</button>

answered Aug 2, 2014 at 10:36

sasha_gud

1,73514 silver badges20 bronze badges

Comments

hakkim · Accepted Answer · 2014-08-02 10:43:48Z

0

If you want to just show the text while you click on the "show button" and hide on click in "hide button" you don't want to complicate the script. just add show() in show button and hide() in hide button as onclick event. here is the code.

<style>
    .hiddendiv {display:none;}
    </style>

function show() {document.getElementById('scritta').style.display="block";} function hide() {document.getElementById('scritta').style.display="none";}

I am not sure that it whether it is your need... however check it... best wishes...

answered Aug 2, 2014 at 10:43

hakkim

6581 gold badge15 silver badges37 bronze badges

Collectives™ on Stack Overflow

hide/show html div with javascript

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related