# simple Javascript query



## clmlbx (Jul 20, 2012)

I made a website and it has a button. when user clicks on it I want to change visibility of another DIV.(with css). at default it will be hidden. 

so button div ID is 'apply' and Div I want to toggle visibility it's ID is 'for'.

and below is Javascript code.. what's wrong in it. ?

one more thing if anyhow needed, this below code is in External file.. 



```
var apply=document.getElementById("apply");
	
	apply.onclick=function(){
	
	var form=document.getElementById("for");

	form.style.visibility="visible";};
```


----------



## hjthegeek (Jul 20, 2012)

Goto JSLint,The JavaScript Code Quality Tool & paste your javascript code there, it will give a detail report about your code.


----------



## Faun (Jul 20, 2012)

use jquery and be done with less code.

Use something like this:


```
<script>

$(document).ready(function(){

     //this will hide the div initially
     $("#for").hide();

          $("#apply").click(function(e) {
               e.preventDefault();
         
               //showing the hidden div now on click of button
               $("#for").show();

            });

});
</script>
```


----------



## clmlbx (Jul 20, 2012)

ok will check that out but pls tell me what mistake I did in that.


----------



## Zangetsu (Jul 20, 2012)

your code is absolutely fine (no errors)
just put the script inside document.ready.

& I hope u r using html input button


----------



## clmlbx (Jul 20, 2012)

well if everything is correct then why it is not working.. ?

I am using this on Div .. which has just one image in it..


----------



## Zangetsu (Jul 20, 2012)

^can post the code here


----------



## clmlbx (Jul 20, 2012)

I pasted in a new file with all this below code but sill not working.

*HTML Code*




```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "*www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>btn</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="scrip.js" type="text/javascript"></script>
</head>

<body>
<div id="apply">
<img src="image/Apply_Now.png" />
</div> 
<!--end of apply-->

<div id="for">
<p> hushushdu</p>
</div> <!--end of for-->

</body>
</html>
```


*CSS Code*


```
@charset "utf-8";
/* CSS Document */

#apply {
	position: fixed;
	left: 1px;
	bottom: 50%;
}

#for {
	background-color: #CCC;
	height: 500px;
	width: 500px;
	margin: auto;
	left: 50%;
	bottom: 50%;
	z-index: 05;
	visibility: hidden;
	position: fixed;
}
```

*Javascript code*


```
// JavaScript Document

$(document).ready(function(){
var apply = document.getElementById("apply");
apply.onclick = function () {
    var form = document.getElementById("for");
    form.style.visibility = "visible";
};});
```


----------



## Zangetsu (Jul 20, 2012)

^u forgot to use jQuery file use that & your code will work

like this 


```
<script src="Scripts/jquery-1.7.2.js" type="text/javascript"></script>
```


----------



## clmlbx (Jul 20, 2012)

^^ I am not using jquery .. It is simple java script..

tried jquery code by Faun.. even that is not working.. yes this time I added jquery library 1.7 from google API


----------



## Zangetsu (Jul 20, 2012)

clmlbx said:


> ^^ I am not using jquery .. It is simple java script..



but the $ sign is used in jquery. 

just put the script reference of jquery library above the external js file


----------



## clmlbx (Jul 20, 2012)

oops! was testing remove it and still it does not work .. let me edit it..

actually it worked.. thanks for help.

@ faun pls explain this to me.. I know syntaxes of jquery but am not aware of this you used


```
function(e) {
               e.preventDefault();
```

I know what function is but what is 'e' in it and then below statement

finally am gonna use this


```
$(document).ready(function(){

     //this will hide the div initially
     $("#for").hide();

          $("#apply").click(function() {
                     
               //will toggle the visibility of DIV
               $('#for').toggle();

            });

});
```


----------



## furious_gamer (Jul 20, 2012)

^^ 

*api.jquery.com/event.preventDefault/



> For example, clicked anchors will not take the browser to a new URL. We can use event.isDefaultPrevented() to determine if this method has been called by an event handler that was triggered by this event.


----------



## Faun (Jul 20, 2012)

Already explained by furious_games.

Btw, start using jquery. It's more friendly.


----------



## SandeepAugustine (Jul 20, 2012)

Hi, by using simple javascript, you can show/hide a DIV using the following code:

Javascript::

TO SHOW DIV::

document.getElementById('for').style.display = "block";


TO HIDE DIV::

document.getElementById('for').style.display = "none";

Hope this helps. 

SANDEEP


----------



## nbaztec (Jul 20, 2012)

Back in the days of simple JS, we used to do it via

```
window.onload = init
            or...
            document.addEventListener("DOMContentLoaded", init, false)
            
            function init(){}
```

Also you can ignore e.preventDefault() in your case, since the element is not an anchor tag.


----------



## clmlbx (Jul 20, 2012)

thanks guys for all your replies


----------



## furious_gamer (Jul 23, 2012)

Faun said:


> Already explained by furious_games.
> 
> Btw, start using jquery. It's more friendly.



In fact, jquery saved a lot of time, in my development. And easy to use.


----------

