simple Javascript query

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

Code:

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

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

H

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

use jquery and be done with less code.

Use something like this:

PHP:

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

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

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

& I hope u r using html input button

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

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

^can post the code here

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

HTML Code

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

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

Code:

// JavaScript Document

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

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

like this

Code:

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

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

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

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

Code:

function(e) {
               e.preventDefault();

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

finally am gonna use this

Code:

$(document).ready(function(){

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

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

            });

});

^^

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

Already explained by furious_games.

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

S

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. :razz:

SANDEEP

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

PHP:

            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.

thanks guys for all your replies

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.