Get Id Of an elment in onClick event

[Karthik_pranas]

Hi Frendz,

How to get the id of an element using onClick Event in tag using javascript?

[almostbob]

more detail needed
exactly what are you trying to accomplish, is there a single element, or do you want to know which of a number of elements is clicked
what code have you already
fixing code is a lot easier than writing code, so post what you have between [code=html] codes [/code] tags

[twiss]

element.id

[edwinhermann]

Just elaborating on twiss's post:

<script type="text/javascript">
function doSomething(elem) {
alert ('The ID of the element which triggered this is: ' + elem.id;
}
</script>
<div id="blah" onClick="doSomething(this)">Blah blah blah</div>

[Karthik_pranas]

more detail needed exactly what are you trying to accomplish, is there a single element, or do you want to know which of a number of elements is clicked what code have you already fixing code is a lot easier than writing code, so post what you have between [code=html] codes [/code] tags

This is one of my div in my page

<div class="signin_center"><a href="#" name="0" id="signin" onclick="twitterLogin()">Sign in</a> &nbsp; Register</div>

and this is my script

function twitterLogin()
{
	value = document.getElementById("signin").name;
	//alert(value);
	if(value==0)
	{
		document.getElementById("signin").name=1;
		document.getElementById("twitter").style.display='block';
	}
	if(value==1)
	{
		document.getElementById("signin").name=0;
		document.getElementById("twitter").style.display='none';
	}
}

I have Login div with id "twitter". I need to open this div when clicking the sign in. Its working fine when click the sign in link. But now i need if the users click other than the sign in link then the login div should be closed.

[edwinhermann]

One way is to have a transparent DIV that takes up the whole screen with a high z-index value, but still lower than the sign-in DIV. On that DIV you'd have something like this:

<div onClick="cancelSignIn()">

And the corresponding Javascript:

function cancelSignIn() {
document.getElementById("signin").name=0;
document.getElementById("twitter").style.display='none';
}

A full-page DIV an be achieved by putting it after the tag and applying the following CSS (assuming the DIV's id is "canceltwitter":

div#canceltwitter {
position: absolute;
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
height: 100%;
z-index: 50;
display: none;
}

You'd need to also set the z-index of the Twitter div to something greater than 50, and use javascript to set the "display" property of the canceltwitter div to block at the same time as displaying the twitter div. (Also putting the canceltwitter div's display property back to none as part of the cancelSignIn() function).

[Karthik_pranas]

One way is to have a transparent DIV that takes up the whole screen with a high z-index value, but still lower than the sign-in DIV. On that DIV you'd have something like this:

<div onClick="cancelSignIn()">

And the corresponding Javascript:

function cancelSignIn() {
document.getElementById("signin").name=0;
document.getElementById("twitter").style.display='none';
}

A full-page DIV an be achieved by putting it after the tag and applying the following CSS (assuming the DIV's id is "canceltwitter":

div#canceltwitter {
position: absolute;
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
height: 100%;
z-index: 50;
display: none;
}

You'd need to also set the z-index of the Twitter div to something greater than 50, and use javascript to set the "display" property of the canceltwitter div to block at the same time as displaying the twitter div. (Also putting the canceltwitter div's display property back to none as part of the cancelSignIn() function).

Ok Thanks! I'll try this.

[almostbob]

+ could check the innertext or innerhtml of the twitter signin for twitter.com's valid login text to close the divs on receipt of login confirmation
+ should include a button in the twitter div labelled close that fires the CancelSiginin() script, or label the background div, unless there is a visible control some users may refresh the page instead of looking for a close device, and lose whatever they have previously input
& checkout the twitter helpscreens, they probably have this issue pretty well covered

[Karthik_pranas]

Thanks to all.... I have got solution using the following codes.

function twitterLogin(event)
{
	if(event.target.id=="signin" || event.target.id=="twitter")
	{
		value = document.getElementById("signin").name;
		if(value==0)
		{
			if(event.target.id=="signin")
			{
				document.getElementById("signin").name=1;
				document.getElementById("twitter").style.display='block';
			}
		}
		if(value==1)
		{
			if(event.target.id=="signin")
			{
				document.getElementById("signin").name=0;
				document.getElementById("twitter").style.display='none';
			}
		}
	}
	else
	{
		document.getElementById("signin").name=0;
		document.getElementById("twitter").style.display='none';
	}
}

<body onclick="twitterLogin(event)">
    
<div id="twitter" class="twiter_login" style="display:none;">
<!-- Login Design -->
</div>

<a href="#" name="0" id="signin">Sign in</a>

[ushajase]

Thank u karthik. It is really very useful to us. this is good solution. NW i am using this script for my project also. Thank you very much

[ushajase]

Thank u karthik. It is really very useful to us. this is good solution. NW i am using this script for my project also. Thank you very much