By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,717 Members | 1,233 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,717 IT Pros & Developers. It's quick & easy.

simple onclick function

P: n/a
Hi Group of helpers,

Following snippet of code:

<HTML>
<HEAD>
<script>
function color(value)
{
alert(value);
}
</script>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD onclick="javascript:color('headerbackground')">
<A HREF="javascript:color('header')">Messageheader</A>
</TD>
</TR>
</BODY>
</HTML>

I would like to accomplish that when I click "Messageheader", my alert would
read: 'header'.
It does this fine, but when I OK the alert, it pops up again with:
'headerbackground'

Is there a way to prevent this?

Tha!

Mich
Dec 16 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
uhm.
Actually, the 'headerbgcolor' pops before 'header', which is completely
wrong.
How do I pop only 'header' when clicking on that link?

"Michel" <no@spam.please> wrote in message
news:dn**********@news.cistron.nl...
Hi Group of helpers,

Following snippet of code:

<HTML>
<HEAD>
<script>
function color(value)
{
alert(value);
}
</script>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD onclick="javascript:color('headerbackground')">
<A HREF="javascript:color('header')">Messageheader</A>
</TD>
</TR>
</BODY>
</HTML>

I would like to accomplish that when I click "Messageheader", my alert would read: 'header'.
It does this fine, but when I OK the alert, it pops up again with:
'headerbackground'

Is there a way to prevent this?

Tha!

Mich

Dec 16 '05 #2

P: n/a

"Lee" <RE**************@cox.net> wrote in message
news:dn********@drn.newsguy.com...
Michel said:

uhm.
Actually, the 'headerbgcolor' pops before 'header', which is completely
wrong.
How do I pop only 'header' when clicking on that link?


Please don't top-post in this newsgroup.
In your example, there is no reason to have a link at all.
If this doesn't do what you want, you'll need to be more
specific.

<HTML>
<HEAD>
<script type="text/javascript">
function color(value)
{
alert(value);
}
</script>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD onclick="color('header')">
Messageheader
</TD>
</TR>
</TABLE>
</BODY>
</HTML>


Hi Lee, sorry for my top-posting.
Anyway, I need the link as I want 2 seperate alerts. One for when I click
the background and one for the message itself.
Is that possible?
Dec 16 '05 #3

P: n/a
Michel wrote:
[...]

Hi Lee, sorry for my top-posting.
Anyway, I need the link as I want 2 seperate alerts. One for when I click
the background and one for the message itself.
Is that possible?


Yes. There are a couple of ways to do it, below is one. You can use an
onclick on the TD and then use the event properties to see what was
clicked on, or you can put an onclick on each element and go from there.

If you want to stop navigation for some reason, then you need an onclick
on the A element that returns false (or true for navigation to occur).
I've returned false so that the link isn't followed, the value returned
(either true or false) can be based on some condition.

To stop both events firing when the link is clicked, use stopPropagation
(W3C event model) and cancelBubble (IE event model).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Click play</title>
<script type="text/javascript">
function color(e, value)
{
var e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
alert(value);
return false;
}
</script>
</head>
<body>
<table>
<tr>
<td onclick="color(event, 'headerbackground');"
style="width: 10em; border:1px solid blue;">
<a href="http://www.w3.org/"
onclick="return color(event, 'header');">W3.org</a>
</td>
</tr>
</table>
</body>
</html>

--
Rob
Dec 16 '05 #4

P: n/a

"RobG" <rg***@iinet.net.au> wrote in message
news:43**********************@per-qv1-newsreader-01.iinet.net.au...
Michel wrote:
[...]

Hi Lee, sorry for my top-posting.
Anyway, I need the link as I want 2 seperate alerts. One for when I click the background and one for the message itself.
Is that possible?


Yes. There are a couple of ways to do it, below is one. You can use an
onclick on the TD and then use the event properties to see what was
clicked on, or you can put an onclick on each element and go from there.

If you want to stop navigation for some reason, then you need an onclick
on the A element that returns false (or true for navigation to occur).
I've returned false so that the link isn't followed, the value returned
(either true or false) can be based on some condition.

To stop both events firing when the link is clicked, use stopPropagation
(W3C event model) and cancelBubble (IE event model).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Click play</title>
<script type="text/javascript">
function color(e, value)
{
var e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
alert(value);
return false;
}
</script>
</head>
<body>
<table>
<tr>
<td onclick="color(event, 'headerbackground');"
style="width: 10em; border:1px solid blue;">
<a href="http://www.w3.org/"
onclick="return color(event, 'header');">W3.org</a>
</td>
</tr>
</table>
</body>
</html>

--
Rob


Thanks Rob. This is exactly what I wanted.

Mich
Dec 17 '05 #5

P: n/a
On 2005-12-16, Michel <no@spam.please> wrote:
Hi Lee, sorry for my top-posting.
Anyway, I need the link as I want 2 seperate alerts. One for when I click
the background and one for the message itself.
Is that possible?


yes, have the click event for the container check where wether the click was
on the contained item or not.

implementation is somewhat messay as different browsers identify the item
under the mouse pointer in different ways.

Bye.
Jasen
Dec 17 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.