simple Javascript query

clmlbx

clmlbx

Technomancer
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";};
 
Last edited:
H

hjthegeek

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

Faun

Wahahaha~!
Staff member
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>
 
Zangetsu

Zangetsu

I am the master of my Fate.
your code is absolutely fine (no errors)
just put the script inside document.ready.

& I hope u r using html input button
 
OP
clmlbx

clmlbx

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

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

clmlbx

Technomancer
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";
};});
 
Zangetsu

Zangetsu

I am the master of my Fate.
^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>
 
OP
clmlbx

clmlbx

Technomancer
^^ 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
 
OP
clmlbx

clmlbx

Technomancer
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();

            });

});
 
furious_gamer

furious_gamer

Excessive happiness
^^

*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.
Click to expand...
 
Faun

Faun

Wahahaha~!
Staff member
Already explained by furious_games.

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

SandeepAugustine

Right off the assembly line
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
 
nbaztec

nbaztec

Master KOD3R
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.
 
You must log in or register to reply here.
Top Bottom