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

[Joshua Beall]

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').firstChild.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

 

[Michael Winter]

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

[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

 

[John Doe]

<a href='#'

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

<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.display='none';
</script>