Changing <div> or <p> contents with link clicks

[Craig]

Hi,

What I'm trying (quite poorly) to do is make it so when a link is clicked the
text inside a div or p changes.

I've tried numerous things, most of which work in IE but none of which work in
gecko browsers e.g. Mozilla, Netscape, Epiphany etc etc.

This is what I have now and works fine in IE but sits there doing nothing in
anything else:

<script type="text/javascript">
function changeText()
{
document.all.div_or_p_id.innerText = "blahblah";
}
</script>

Can anybody help me with this?

Thanks,
Craig.

 

[DU]

Hi,

What I'm trying (quite poorly) to do is make it so when a link is
clicked the text inside a div or p changes.

When a link is clicked, a new document should be loaded. Otherwise,
you're misusing an element for a particular javascript execution and
users of your page will be confused (and so will the browser properties).
Best is to use a button for such goal and not a link.

I've tried numerous things, most of which work in IE but none of which
work in gecko browsers e.g. Mozilla, Netscape, Epiphany etc etc.

This is what I have now and works fine in IE but sits there doing
nothing in anything else:

<script type="text/javascript">
function changeText()
{
document.all.div_or_p_id.innerText = "blahblah";

innerText is a proprietary MSIE attribute, not part of W3C web standards.

}
</script>

Can anybody help me with this?

Thanks,
Craig.

Assuming this is your text:

<p id="idTargetedParg">Previous text to change</p>
<p><button type="button" onclick="changeText();">Change the text in the
above paragraph</button></p>

then
<script type="text/javascript">
function changeText()
{
if(document.getElementById("idTargetedParg").childNodes[0].nodeType == "3")
{
document.getElementById("idTargetedParg").childNodes[0].nodeValue = "New
text replacement";
};
this.disabled = true;
}
</script>

The text node must be the first node of the targeted paragraph. This
will work in MSIE 6 for windows, Opera 7.x, in any Mozilla 1.x based
browsers and in other W3C DOM 2 CharacterData compliant browsers.

All other W3C DOM 2 CharacterData attributes and methods are entirely
supported by MSIE 6, Mozilla 1.x, Opera 7 and other compliant browsers.
There is no need, no justification to use innerText anymore.

DU

 

[Craig]

That works a treat, thank you very much. Is there a way to change it to text
including HTML e.g. the equivalent to MSIE's document.all.div_or_p_id.innerHTML?

Thanks again,
Craig

Hi,

What I'm trying (quite poorly) to do is make it so when a link is
clicked the text inside a div or p changes.

When a link is clicked, a new document should be loaded. Otherwise,
you're misusing an element for a particular javascript execution and
users of your page will be confused (and so will the browser properties).
Best is to use a button for such goal and not a link.

I've tried numerous things, most of which work in IE but none of which
work in gecko browsers e.g. Mozilla, Netscape, Epiphany etc etc.

This is what I have now and works fine in IE but sits there doing
nothing in anything else:

<script type="text/javascript">
function changeText()
{
document.all.div_or_p_id.innerText = "blahblah";

innerText is a proprietary MSIE attribute, not part of W3C web standards.

}
</script>

Can anybody help me with this?

Thanks,
Craig.

Assuming this is your text:

<p id="idTargetedParg">Previous text to change</p>
<p><button type="button" onclick="changeText();">Change the text in the
above paragraph</button></p>

then
<script type="text/javascript">
function changeText()
{
if(document.getElementById("idTargetedParg").childNodes[0].nodeType == "3")
{ document.getElementById("idTargetedParg").childNodes[0].nodeValue =
"New text replacement";
};
this.disabled = true;
}
</script>

The text node must be the first node of the targeted paragraph. This
will work in MSIE 6 for windows, Opera 7.x, in any Mozilla 1.x based
browsers and in other W3C DOM 2 CharacterData compliant browsers.

All other W3C DOM 2 CharacterData attributes and methods are entirely
supported by MSIE 6, Mozilla 1.x, Opera 7 and other compliant browsers.
There is no need, no justification to use innerText anymore.

DU

 

[DU]

That works a treat, thank you very much. Is there a way to change it to
text including HTML e.g. the equivalent to MSIE's
document.all.div_or_p_id.innerHTML?

Thanks again,
Craig

Best would have been for you to give/follow up with a complete chunk of
code as a working example or an url with an example here. I strongly
recommend you drop completely recourse to
document.all
when constructing a DHTML command or javascript instruction for the sake
of interoperability and cross-browser support. document.all is not a W3C
DOM method; it's a MSIE-only proprietary DOM method which will not work
in all browsers.

These 2 documents:

Using Web Standards in Your Web Pages
http://www.mozilla.org/docs/web-developer/upgrade_2.html

Updating DHTML Web Pages for next generation browsers:
What you need to know about the layer tag, document.all, and other
proprietary extensions and how to work with them in a cross browser world.
http://devedge.netscape.com/viewsource/2001/updating-dhtml-web-pages/

explain well involved issues.

FWIW,
document.getElementById("div_or_p_id").innerHTML = "<b>Very
important<\/b> notice.";
will work in MSIE 6, Opera 7, NS 7.x, Mozilla 1.x, K-meleon 0.8.x,
MyIE2, etc.

DU

Hi,

What I'm trying (quite poorly) to do is make it so when a link is
clicked the text inside a div or p changes.

When a link is clicked, a new document should be loaded. Otherwise,
you're misusing an element for a particular javascript execution and
users of your page will be confused (and so will the browser properties).
Best is to use a button for such goal and not a link.

I've tried numerous things, most of which work in IE but none of
which work in gecko browsers e.g. Mozilla, Netscape, Epiphany etc etc.

This is what I have now and works fine in IE but sits there doing
nothing in anything else:

<script type="text/javascript">
function changeText()
{
document.all.div_or_p_id.innerText = "blahblah";

innerText is a proprietary MSIE attribute, not part of W3C web standards.

}
</script>

Can anybody help me with this?

Thanks,
Craig.

Assuming this is your text:

<p id="idTargetedParg">Previous text to change</p>
<p><button type="button" onclick="changeText();">Change the text in
the above paragraph</button></p>

then
<script type="text/javascript">
function changeText()
{
if(document.getElementById("idTargetedParg").childNodes[0].nodeType ==
"3")
{ document.getElementById("idTargetedParg").childNodes[0].nodeValue =
"New text replacement";
};
this.disabled = true;
}
</script>

The text node must be the first node of the targeted paragraph. This
will work in MSIE 6 for windows, Opera 7.x, in any Mozilla 1.x based
browsers and in other W3C DOM 2 CharacterData compliant browsers.

All other W3C DOM 2 CharacterData attributes and methods are entirely
supported by MSIE 6, Mozilla 1.x, Opera 7 and other compliant
browsers. There is no need, no justification to use innerText anymore.

DU