PDA

View Full Version : How to tell which char was clicked on

x_goose_x
07-19-2002, 06:37 AM
I want to have a layer that lists the alphabet and when a user clicks on a letter it alerts the letter. I'm trying to stay away from setting up an onclick per character. Anyone have any ideas?

<div onclick="???">
a b c d e f g h i<br>
j k l m n o p q<br>
r s t u v w x y z<br>
</div>
tommysphone
07-19-2002, 01:00 PM
Use the code below. Let me know how you go and if its what your after :)


<html>

<head>
<style>
p {
font-family:tahoma; font-size:10pt;
}
li {
font-family:tahoma; font-size:10pt;
}

A {
font-family:"Tahoma";
font-size:"10pt";
color:"#000000";
text-decoration:"underline";
}
A:hover {
font-weight:"bold";
}
</style>
<title>A Name</title>
<script language="JavaScript">
var PrevTableName = 'Layer1'
function ShowInfo(TableName) {
eval('document.all.' + PrevTableName + '.style.display="none"');
PrevTableName = TableName;
eval('document.all.' + TableName + '.style.display="block"');
}
</script>
</head>

<body bgcolor="#FFFFFF">

<form name="a_name">
<div align="left"><table border="0" width="700">
<tr>
<td valign="top" align="left" colspan="2"><font color="#005BBF" size="3" face="Tahoma"><strong>A
name for the page</strong></font></td>
</tr>
<tr>
<td valign="top" align="left" width="200"><div align="left"><table border="0" width="200">
<tr>
<td width="200" valign="top" align="left" bgcolor="#FFFFFF" height="30"></td>
</tr>
<tr>
<td width="200" valign="top" align="left"><font size="2" color="#000000" face="Tahoma"><a
onMouseOver="ShowInfo('Layer1')" href="#" style="color: rgb(0,0,0)">A</a><br>
<a onMouseOver="ShowInfo('Layer2')" href="#" style="color: rgb(0,0,0)">B</a><br>
<a onMouseOver="ShowInfo('Layer3')" href="#" style="color: rgb(0,0,0)">C</a> <br>
<a onMouseOver="ShowInfo('Layer4')" href="#" style="color: rgb(0,0,0)">D</a><br>
</font></td>
</tr>
</table>
</div></td>
<td valign="top" align="left">&nbsp;<div align="center"><center><table id="Layer1"
style="display:none" BORDER="0" CELLSPACING="1" CELLPADDING="7" WIDTH="400">
<tr>
<td VALIGN="top" BGCOLOR="#8DCFF4"><div align="center"><center><p><font size="2"
color="#000000" face="Tahoma"><b>A</b></font></td>
</tr>
<tr align="center">
<td WIDTH="100%" VALIGN="TOP" align="center"><div align="left"><p><font face="Tahoma">A
information</font></td>
</tr>
</table>
</center></div><div align="center"><center><table id="Layer2" style="display:none"
BORDER="0" CELLSPACING="1" CELLPADDING="7" WIDTH="400">
<tr>
<td VALIGN="top" BGCOLOR="#8DCFF4"><div align="center"><center><p><font size="2"
color="#000000" face="Tahoma"><strong><b>B</b></strong></font></td>
</tr>
<tr align="center">
<td WIDTH="100%" VALIGN="TOP" align="center"><b><font size="3"><div align="left"><p></font></b><font
size="2">B information</font></td>
</tr>
</table>
</center></div><div align="center"><center><table id="Layer3" style="display:none"
BORDER="0" CELLSPACING="1" CELLPADDING="7" WIDTH="400">
<tr>
<td VALIGN="top" BGCOLOR="#8DCFF4"><div align="center"><center><p><font size="2"
color="#000000" face="Tahoma"><strong>C</strong></font></td>
</tr>
<tr align="center">
<td WIDTH="100%" VALIGN="TOP" align="left"><div align="left"><p>C information</td>
</tr>
</table>
</center></div><div align="center"><center><table id="Layer4" style="display:none"
BORDER="0" CELLSPACING="1" CELLPADDING="7" WIDTH="400">
<tr>
<td VALIGN="top" BGCOLOR="#8DCFF4"><div align="center"><center><p><font size="2"
color="#000000" face="Tahoma"><strong><b>D</b></strong></font></td>
</tr>
<tr align="center">
<td WIDTH="100%" VALIGN="TOP"><div align="left"><p>D information</td>
</tr>
</table>
</center></div></td>
</tr>
</table>
</div>
</form>
</body>
</html>
x_goose_x
07-19-2002, 01:45 PM
Thanx for the response, but I already know how to do this. I was wondering if there is a way of checking which character was clicked without using a line per character:

<a href="javascript: alert(''B);">B</a> <--- not what I wanted
<div onclick="alert(this.innerHTML);">B</div> <--- not what I wanted

That way requires too much code once there are 26 characters. I thought maybe there's a way using "event" (which I don't know how to use all that well).
mordred
07-19-2002, 02:42 PM
Honestly, I don't think your request is fullfillable. You're simply asking too much of JavaScript. It's easy to determine which element was clicked, and also to get the offsets of a selection. But to determine which character in a text node was clicked on? Maybe it *could* be possible with some esoteric DOM scripting method (jkd might know more), but adjusting to your needs and ensuring decent cross-browser-compatibility will also let your code increase in size.

I suggest another approach: You can read out the text of your <div> element with DHTML upon onload. After storing the text in a variable, you delete the text and insert <span> elements for each Character found. That should be possible with a simple loop. And each element gets its own onclick eventhandler and passes its text contents to the eventhandling function.

After all, you don't want to clutter your source codes with a lot of redundant code lines. The approach above should provide that.

You could do this also without having any text in the <div> at all, using String.fromCharCode(int) in a loop which loop control variable is similar to the unicode arguments for String.fromCharCode.
tommysphone
07-19-2002, 03:40 PM
So if a user clicks W you want an alert box to popup to tell them they chose W?
x_goose_x
07-19-2002, 04:36 PM
I figured it wasn't possible, but it was worth a try.
nolachrymose
07-19-2002, 05:33 PM
How about this script?

for(var i=97;i<(97+25);i++) {
document.write('<div onclick="alert(String.fromCharCode('+i+'));">'+String.fromCharCode(i)+'</div>');
}

Hope that helps!

Happy coding! :)
x_goose_x
07-19-2002, 05:43 PM
Great minds think alike. I just finished doing that with

<a href="javasc...
jkd
07-19-2002, 10:28 PM
*sigh*:

<div onclick="alert(this.firstChild.nodeValue.charAt(event.rangeOffset))">
abcdefghijklmnopqrstuvwxyz
</div>

A Gecko-only example, as rangeOffset is a proprietary Event property.
Pooh
07-20-2002, 08:07 AM
<script>
var getChar;
function whatChar() {
mouseX=event.x;
mouseY=event.y;
getChar=document.body.createTextRange();
getChar.moveToPoint(mouseX, mouseY);
getChar.expand("character");
getChar.execCommand("ForeColor",false,"aqua");
alert(getChar.text);

}
document.onclick=whatChar;
</script>
mordred
07-20-2002, 08:15 PM
Wow... I stand corrected.