Very simple onClick event that I'm struggling with...

Hi All,

Here's what I want to have: a link that when people click on it, another bit
of text pops up right below it saying "Click here to continue." Here's what
I've got:

<a href='#'
onClick="document.getElementById('continueLink').f irstChild.data='Are you
sure? Click here to continue.';">
Delete
</a>
<a ID='continueLink' href='next.php' style="margin: 10px 20px;">
</a>

Now IE complains about firstChild.data being null or not an object. I can
fix this by puting &nbsp; at the text content of the <a> tag, but then you
see an underscore there (actually an underlined non breaking space) even
before they've clicked.

How should I be going about this?

Thanks for any pointers,
-Josh

re: Very simple onClick event that I'm struggling with...

Joshua Beall wrote:[color=blue]
> Hi All,
>
> Here's what I want to have: a link that when people click on it, another bit
> of text pops up right below it saying "Click here to continue." Here's what
> I've got:
>
> <a href='#'
> onClick="document.getElementById('continueLink').f irstChild.data='Are you
> sure? Click here to continue.';">
> Delete
> </a>
> <a ID='continueLink' href='next.php' style="margin: 10px 20px;">
> </a>
>
> Now IE complains about firstChild.data being null or not an object. I can
> fix this by puting &nbsp; at the text content of the <a> tag, but then you
> see an underscore there (actually an underlined non breaking space) even
> before they've clicked.
>
> How should I be going about this?
>
> Thanks for any pointers,
> -Josh
>
>[/color]
The 'continueLink' A tag, if it doesn't contain any text or elements,
therefore doesn't have any childNodes or a firstChild (although Mozilla
would argue differently). If you include "&nbsp;" this counts as a text
node and firstChild becomes valid.

An alternative is to use innerHTML:

<a href='#'
onClick="document.getElementById('continueLink').i nnerHTML='Are you
sure? Click here to continue.'">

Alternatively, include an empty SPAN or DIV and use appendChild to
insert the entire A element.

re: Very simple onClick event that I'm struggling with...

Paul R wrote:
[color=blue]
> The 'continueLink' A tag, if it doesn't contain any text or elements,
> therefore doesn't have any childNodes or a firstChild (although Mozilla
> would argue differently).[/color]

[snip]

An alternative that you didn't mention was the conditional creation of
a text node:

if(elem.hasChildNodes()) {
elem.firstChild.data = text;
} else {
elem.appendChild(document.createTextNode(text));
}

Feature testing omitted.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

re: Very simple onClick event that I'm struggling with...

> <a href='#'[color=blue]
> onClick="document.getElementById('continueLink').f irstChild.data='Are you
> sure? Click here to continue.';">
> Delete
> </a>
> <a ID='continueLink' href='next.php' style="margin: 10px 20px;">
> </a>[/color]
<a href='#' onClick="document.getElementById
('continueLink').style.display='';">
Delete
</a>
<a ID='continueLink' href='next.php' style="margin: 10px 20px;">
Are you sure? Click here to continue.
</a>
<script>
document.getElementById('continueLink').style.disp lay='none';
</script>