changing DIV visibility with JavaScript

Question

EDIT: Since the question has became quite popular I will fix the problem so it will be working code example. The original problem is still listed, But the code works.

i am trying to show a div after pressing a button but this wont work, any idea why is that?

<form action="insert.php" method="POST" align="right" id="post_form">
<input type="button" value="click me" onClick="show()">
<div id="show_button">  fdsfds </div><br>
</form>

#show_button{
 visibility:hidden;
}

function show(){
  // alert("cheked the button - worked");
  document.getElementById("show_button").style.visibility= 'visible' ;
}

You should wrap the id with quotes: `document.getElementById("show_button")` — Antony, Apr 21 '13 at 14:51
@Antony you are so right my friend, to much time wasted... thanks alot god bless you. — antonpuz, Apr 21 '13 at 14:53

score 20 · Answer 1 · answered Apr 21 '13 at 14:51

20

Change your CSS to:

#show_button{
 display: none
}

And you in your javascript:

function show(){
  //alert("cheked the button - worked");
  document.getElementById('show_button').style.display= 'block' ;
}

answered Apr 21 '13 at 14:51

Dragos Rizescu

3,380
5
31
42

@DavidThomas yes, I missed that, however, I corrected my answer for further reference – Dragos Rizescu Apr 21 '13 at 14:54

Tamil Selvan C · Answer 2 · 2016-08-18T01:16:00.430

4

Typo error change it document.getElementById(show_button) to document.getElementById("show_button")

function show(){
  document.getElementById("show_button").style.visibility= "visible" ;
}

edited Aug 18 '16 at 01:16

answered Apr 21 '13 at 15:03

Tamil Selvan C

19,913
12
49
70

Could you please expand on this answer? Perhaps explain what this will do? – Kermit Apr 21 '13 at 15:22

score 1 · Answer 3 · answered Apr 21 '13 at 14:52

Try this :

function show(){
  //alert("cheked the button - worked");
  document.getElementById("show_button").style.visibility= "visible" ;
}

or

function show(){
  //alert("cheked the button - worked");
  document.getElementById(show_button).style.display= "inline" ;
}

score 0 · Answer 4 · edited Aug 18 '16 at 01:16

0

document.getElementById(show_button) -: syntax error, Missing quotes " " !

edited Aug 18 '16 at 01:16

Tamil Selvan C

19,913
12
49
70

answered Apr 21 '13 at 14:58

sakthi

929
6
18

I didn't try that in any editor. Anyhow, I use dreamweaver cs 6. – sakthi Apr 21 '13 at 16:07

changing DIV visibility with JavaScript

4 Answers4

Linked