473,800 Members | 2,367 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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.di v_or_p_id.inner Text = "blahblah";
}
</script>

Can anybody help me with this?

Thanks,
Craig.
Jul 20 '05 #1
3 2250
DU
Craig wrote:
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.di v_or_p_id.inner Text = "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="idTargetedP arg">Previous text to change</p>
<p><button type="button" onclick="change Text();">Change the text in the
above paragraph</button></p>

then
<script type="text/javascript">
function changeText()
{
if(document.get ElementById("id TargetedParg"). childNodes[0].nodeType == "3")
{
document.getEle mentById("idTar getedParg").chi ldNodes[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

Jul 20 '05 #2
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.di v_or_p_id.inner HTML?

Thanks again,
Craig

DU wrote:
Craig wrote:
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.di v_or_p_id.inner Text = "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="idTargetedP arg">Previous text to change</p>
<p><button type="button" onclick="change Text();">Change the text in the
above paragraph</button></p>

then
<script type="text/javascript">
function changeText()
{
if(document.get ElementById("id TargetedParg"). childNodes[0].nodeType == "3")
{ document.getEle mentById("idTar getedParg").chi ldNodes[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

Jul 20 '05 #3
DU
Craig wrote:
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.di v_or_p_id.inner HTML?

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 interoperabilit y 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-deve...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/viewsour...tml-web-pages/

explain well involved issues.

FWIW,
document.getEle mentById("div_o r_p_id").innerH TML = "<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
DU wrote:
Craig wrote:
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.di v_or_p_id.inner Text = "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="idTargetedP arg">Previous text to change</p>
<p><button type="button" onclick="change Text();">Change the text in
the above paragraph</button></p>

then
<script type="text/javascript">
function changeText()
{
if(document.get ElementById("id TargetedParg"). childNodes[0].nodeType ==
"3")
{ document.getEle mentById("idTar getedParg").chi ldNodes[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

Jul 20 '05 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
688
by: Lilou | last post by:
Hello this page works : http://lilou.leuwen.chez.tiscali.fr/testlilou.htm the source : .... a.link:hover div.test2 {display : block; position: absolute; z-index: 1000;
3
5013
by: Philip | last post by:
I am trying to make a bunched of left-floated divs that will be contained in a larger div. the floated divs all contain a left-floated img and text of varying sizes. If I don't set a height (or height:auto) the larger div doesn't seem to see the nested divs, and they spill out the bottom. IE seems to automatically resize the larger div as long as I set the height to 100% or any pixel size. Mozilla doesn't recognize the percent, and...
15
2263
by: scott | last post by:
Hello, I'm working on updating some of my table-based sites to use CSS instead of tables. One of my sites has a header that is composed of three elements: A B C In my prior design, this was done using a table. A, B, and C were each <tdelements.
3
1986
by: chris1606 | last post by:
I have an image gallery that pops up an enlarged version of a picture when someone clicks on it. That bit works, but it should also load the picture's caption into the floating layer. Instead the caption remains unchanged and gives an "object doesn't support this property or method" dialog. The code is as follows: <script> function goBig(objNo, caption) { document.getElementById('floatdiv').style.visibility = 'visible'; ...
2
3389
by: Richard Maher | last post by:
Hi, I'm trying to use the Visibility Style attribute for a Div to effectively PopUp a lightweight window with some additional context-sensitive information, when a user mouses over a given field(s). The popping-up seems to work just fine; it's the tearing down that's giving me grief. If I stick a onmouseout event on the same input field that caused the onmouseover/pop-up, it starts to flicker 'cos the <divis placed for esthetically...
8
1875
by: richard | last post by:
I have <div id=box1 style="display:block"as the initial setting. I need to change the "display:block" to "display:none" then back to "display:block" as a means of clearing anything that might be displayed within the box1 division. What's the simplest way of doing this?
0
1864
by: Patricia Mindanao | last post by:
Assume I have a HTML web page with a pre-defined <div...</divarea. When the users clicks now on a certain link on this web page (outside or inside this "div" area) then the content of a file say "first.html" (currently still on the server) should be loaded and filled into the existing <div>...</divarea in the current Web page and displayed. How can I do this in detail? Pat
8
10050
prino
by: prino | last post by:
Hi all, I've written code (in REXX) that takes files in legacy languages (PL/I, COBOL, z/OS assembler, etc) and converts them into HTML in a format similar to what's displayed in the z/OS ISPF editor. A fellow member of the PCG has helped me by creating a bit of Javascript to emulate the scrolling and using Google I've now gotten it into a state where it almost passes the W3C Markup Validation Service. However, the one error, Error Line 166,...
0
9691
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10505
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10276
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10253
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
7580
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5471
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5606
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
3764
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2945
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.