Member Avatar for karthik_ppts

Hi Frendz,

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

Edited by karthik_ppts because: n/a
  • 5 Contributors
  • 10 Replies
  • 16K Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by ushajase

Dani AI

Generated

If you want the body click to both toggle the sign-in panel and close it when clicking anywhere else, prefer event delegation with a single listener and avoid inline handlers. This also works for elements added later. Use event.target to see what was clicked, and Element.closest() to test whether the click came from the sign-in control or inside the panel. Instead of overloading the name attribute for state, toggle the hidden attribute or a class.

const signIn = document.getElementById('signin');
const panel = document.getElementById('twitter');

document.addEventListener('click', (e) => {
  const clickedSignIn = e.target.closest('#signin');
  const clickedInsidePanel = e.target.closest('#twitter');

  if (clickedSignIn) {
    panel.hidden = !panel.hidden; // toggle open/close
  } else if (!clickedInsidePanel) {
    panel.hidden = true; // close when clicking elsewhere
  }
});

// Optional: close with Escape
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') panel.hidden = true;
});

Add a small CSS rule if needed to ensure hidden panels do not display:

[hidden] { display: none; }

Notes and pitfalls:

  • event.target is the actual clicked element; it can be a child. Checking closest() avoids brittle id comparisons. See MDN for Event.target and Element.closest.
  • Avoid inline onclick and use addEventListener for separation of concerns and easier testing.
  • Ensure id="signin" is unique, and consider accessibility: give the panel role="dialog" and move focus into it when opened; return focus to the trigger when closed.

Recommended Answers

All 10 Replies

Member Avatar for 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

Member Avatar for twiss 
element.id
Member Avatar for 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>
Edited by edwinhermann because: n/a
Member Avatar for karthik_ppts

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.

Member Avatar for 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 <body> 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).

Member Avatar for karthik_ppts

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

Member Avatar for 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

Edited by almostbob because: n/a
Member Avatar for karthik_ppts

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>
Member Avatar for 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

Edited by ushajase because: n/a
Member Avatar for 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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.