Page 1 of 1

Detect ID of element clicked without element event?

Posted: Sat Sep 29, 2007 9:26 pm
by JAB Creations
Let's say I have the following XHTML...

Code: Select all

<div id="ha1">...</div>
<div id="hb2">...</div>
<div id="hc3">...</div>
I can not modify the XHTML whatsoever. Strictly from the JavaScript itself how do I detect the ID of the element that is clicked? I'd like to set it to a variable. So for example if I assign the variable to alert, if the user clicks on "hb2" it will set the variable's value to "hb2", alert, and can be repeated. The script needs to be able to reassign the variable's value every time a new ID is detected.

Posted: Sat Sep 29, 2007 10:41 pm
by feyd
Javascript can add events...

By the way, there isn't a specific XHTML syntax highlighter, it simply falls under HTML.

Posted: Sat Sep 29, 2007 11:27 pm
by JAB Creations
So window.onload we want JavaScript to listen for .onclick. The problem for me is I still am unaware of how to detect the ID of the element being clicked!

Posted: Sat Sep 29, 2007 11:29 pm
by feyd
The method accepts a single parameter which is an event object. Some browsers supply a global event object, therefore don't actually pass in that parameter. The event object references the element firing the event.

Posted: Sat Sep 29, 2007 11:43 pm
by JAB Creations
XHTML and CSS I can follow the terminology just fine, but I'm still working on JavaScript. I need some sort of code I can reference online and mess around with.

Code: Select all

document.addEventListener(onclick, myfunction, useCapture);
This is what I'm guessing you're hinting at. Still I don't see the connection to actually getting the ID. If I can get the ID I should be able to execute the script with little or no trouble. What is the usecapture for?

Referenced from...
http://developer.mozilla.org/en/docs/DO ... ntListener

Posted: Sun Sep 30, 2007 12:18 am
by feyd
There are two separate things: event methods and addEventListener. I referred to both. The first response was about the latter, while the second response was about the former.

Posted: Sun Sep 30, 2007 12:51 am
by JAB Creations
I appreciate the help though I'm really not a conceptual person at such a raw level, do you have any material examples that can give me a visual of what you're talking about? I'm looking up what you're mentioning (terminology really), throwing it in with what I'm looking for (.onclick, this, etc) and I'm surprised I haven't found anything that relates to dynamically determining the id of an element that has been clicked. :(

Posted: Sun Sep 30, 2007 7:34 am
by VladSun

Code: Select all

<html>
	<body>
		<div id='id1'>1</div>
		<div id='id2'>2</div>
	</body>

	<script>
	elements = document.getElementsByTagName("div");
	for(i=0; i<elements.length; i++)
	{
		elements[i].onclick = new Function('alert("' + elements[i].id +'");');
	}
	</script>
</html>
Maybe not the best solution, but it works :)

Posted: Sun Sep 30, 2007 1:14 pm
by JAB Creations
Thank you for the good example, it at least shows the behavior of the script I desire. If I can get it to alert the ID I should be able to assign it to a variable just fine.

However the code itself only works at the bottom of the page and also only works with div elements. I want to be able to select any element by it's ID. I can understand needing to set a separate function in conjunction with addEventListener but I don't have any concept of how to approach is correctly.

Posted: Sun Sep 30, 2007 1:57 pm
by JAB Creations
Got some more help. :D For those following in my steps, here is what I was looking for...

Code: Select all

<?php
header("Content-type: application/xhtml+xml");
echo '<?xml version="1.0" encoding="UTF-8"?>
';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>JAB Creations - Version 2.8 Live Test Case</title>
<script type="text/javascript">
//<![CDATA[

var unknown;

window.onload=function() {
el=document.body.getElementsByTagName('*');
for(c=0;c<el.length;c++) {
el[c].onclick=function() {
unknown=this.id;
alert(unknown);
}
}
}
//]]>
</script>
</head>

<body>

<h1 id="header1">header</h1>
<div id="ha1">...</div>
<div id="hb2">...</div>
<div id="hc3">...</div>

</body>
</html>