• 0

text change with onclick


Question

Ok heres my sample source below and what im wanting to do is...when i click on either links

i want the TEXT that says "Current Projects -> Upcoming" to change to something else

i know that you can do this in cells but im not sure how else i can do this...

Any ideas?

ive also included the source code of how to do it with cells other than cells im not to sure thanks for the help

<html>

<head>

<title>Under Construction </title>

</head>

<body>

<TABLE cellSpacing=0 cellPadding=10 width="896" border=0 style="border-collapse: collapse" bordercolor="#111111" height="1">

<TR bgColor=#f9c000>

<TD bgColor=#000000 width="144" height="12">

<b><a style="TEXT-DECORATION: none" href="http://www.draac.com/">

<font face="Verdana" color="#ffffff" size="1">Related

links</font></a></b></TD>

<TD bgColor=#FFFFFF width="713" height="12">

<P align=left><nobr>

<font class="mainNews" color="#000000" face="Verdana" size="1"><b>

<font class="mainFontSmall" color="#808080">You Are Viewing:</font>    </b>

<span lang="en-us"><b>Current Projects</b></span><b>   <span lang="en-us">-</span>>  

<span lang="en-us">Upcoming</span></b></font></nobr></TD>& lt;/TR></TABLE>

<table width="163" border="0" cellspacing="0" cellpadding="0" height="15" align="left" style="border-collapse: collapse" bordercolor="#C0C0C0">

<tr>

<td bgcolor="#808080" bordercolor="#000000" width="181" height="1">

<b>

<a style="text-decoration: none" href="TEST.html">

<font face="Verdana" color="#FFFFFF" style="font-size: 8.5pt">  Our Organization</font></a></b></td>

</tr>

<tr>

<TD bgColor=#c0c0c0 height="1" bordercolor="#C0C0C0" width="181">

<b><font face="Verdana" style="font-size: 8.5pt" color="#FFFFFF"> 

</font><a style="text-decoration: none" href="TEST2.html">

<font face="Verdana" style="font-size: 8.5pt" color="#FFFFFF">Testing

Link 2</font></a></b></TD>

</tr>

</table>

</body>

</html>

<script LANGUAGE="JavaScript">

function myClick3() {

document.all("ONE").innerText = 'This is table cell ONE';

document.all("TWO").innerText = 'This is table cell TWO';

}

</SCRIPT>

<TABLE BORDER=1>

<TR><TD ID="ONE">This is the text in ONE</TD></TR>

<TR><TD ID="TWO">This is the text in TWO</TD></TR>

</TABLE>

<FORM><INPUT TYPE="BUTTON" VALUE="Click Me" onClick="myClick3()"></FORM>

Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

I'm not sure what you mean, but you could put the text you want to change into a DIV ...

then go eg onclick=document.divID.innerHTML = "changed text"

again im not sure what you mean but hope it helps anyway...

Link to comment
Share on other sites

  • 0

DOM and CSS is fun

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
        &lt;title&gt;Test&lt;/title&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
        &lt;style type="text/css"&gt;&lt;!--
        body { background-color: gray; }
        #parent { color: blue; }
        #child { color: purple; }
        --&gt;&lt;/style&gt;
        &lt;script type="text/javascript"&gt;&lt;!--
        function ChangeParent()
        {
                var ParentField = document.getElementById("parent");
                var ParentFieldText = ParentField.firstChild;
                if( ParentFieldText.nodeValue == "Sad Parent" )
                {
                        ParentFieldText.nodeValue = "Happy Parent";
                        ParentField.style.color = "red";
                }
                else
                {
                        ParentFieldText.nodeValue = "Sad Parent";
                        ParentField.style.color = "blue";
                }
        }
        function ChangeChild()
        {
                var ChildField = document.getElementById("child");
                var ChildFieldText = ChildField.firstChild;
                if( ChildFieldText.nodeValue == "Sad Child" )
                {
                        ChildFieldText.nodeValue = "Happy Child";
                        ChildField.style.color = "yellow";
                }
                else
                {
                        ChildFieldText.nodeValue = "Sad Child";
                        ChildField.style.color = "purple";
                }
        }
        --&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;BODY&gt;
&lt;p&gt;&lt;span id="parent"&gt;Sad Parent&lt;/span&gt; --&gt; &lt;span id="child"&gt;Sad Child&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;
        &lt;a href="#" onclick="ChangeParent();"&gt;Change Parent&lt;/a&gt;&lt;br&gt;
        &lt;a href="#" onclick="ChangeChild();"&gt;Change Child&lt;/a&gt;
&lt;/p&gt;
&lt;/BODY&gt;
&lt;/html&gt;

innerHTML and document.all is very bad. :no:

Unless you want to force users to switch to IE, then it's very good. :yes:

http://www.developer-x.com/content/innerhtml/

http://www.metalusions.com/backstage/articles/8/

Link to comment
Share on other sites

  • 0

OK oogle i need ya help.. ok this works for the most part.. only thing is i dont need the colors changing... but i do need... 2 parts of the text to change with 1 url...

let me explain...

ok copy the html and look at it... what i need it to do is change.. like this..

when ya click on change parent i need the text Current Projects to say current projects1 and upcomming to change to upcomming1 with just 1 url instead of the 2 urls you have...

how can i do this? hope it makes sense...

<html>

<head>

<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript"><!--

function ChangeParent()

{

var ParentField = document.getElementById("parent");

var ParentFieldText = ParentField.firstChild;

if( ParentFieldText.nodeValue == "Customer Service" )

{

ParentFieldText.nodeValue = "Happy Parent";

ParentField.style.color = "black";

}

else

{

ParentFieldText.nodeValue = "Customer Service";

ParentField.style.color = "black";

}

}

function ChangeChild()

{

var ChildField = document.getElementById("child");

var ChildFieldText = ChildField.firstChild;

if( ChildFieldText.nodeValue == "Sad Child" )

{

ChildFieldText.nodeValue = "Happy Child";

ChildField.style.color = "black";

}

else

{

ChildFieldText.nodeValue = "Sad Child";

ChildField.style.color = "black";

}

}

--></script>

</head>

<BODY>

<p>

<a href="#" onclick="ChangeParent();">Change Parent</a><br>

<a href="#" onclick="ChangeChild();">Change Child</a>

</p>

<table cellSpacing="0" cellPadding="10" width="896" border="0" style="border-collapse: collapse" bordercolor="#111111" height="1">

<tr bgColor="#f9c000">

<td ID="TextID" bgColor="#FFFFFF" width="713" height="12">

<p align="left"><nobr>

<font class="mainNews" color="#000000" face="Verdana" size="1"><b>

<font class="mainFontSmall" color="#808080">You Are Viewing:</font>   

<span id="parent">Current Projects</span>   <span lang="en-us">-</span>>  

<span id="child">Upcoming</span></b></font></nobr></td>

</tr>

</table>

</BODY>

</html>

Link to comment
Share on other sites

  • 0

Before you go any further, you should really rethink your HTML coding habits. If you don't, your final website will be an absolute mess to maintain. You should make heavy use of CSS. For example, instead of long and nightmare HTML code like this...

&lt;BODY&gt;
&lt;p&gt;
&lt;a href="#" onclick="ChangeParent();"&gt;Change Parent&lt;/a&gt;&lt;br&gt;
&lt;a href="#" onclick="ChangeChild();"&gt;Change Child&lt;/a&gt;
&lt;/p&gt;
&lt;table cellSpacing="0" cellPadding="10" width="896" border="0" style="border-collapse: collapse" bordercolor="#111111" height="1"&gt;
&lt;tr bgColor="#f9c000"&gt;
&lt;td ID="TextID" bgColor="#FFFFFF" width="713" height="12"&gt;
        &lt;p align="left"&gt;
        &lt;font class="mainNews" color="#000000" face="Verdana" size="1"&gt;&lt;b&gt;
        &lt;font class="mainFontSmall" color="#808080"&gt;You Are Viewing:&lt;/font&gt;   
        &lt;span id="parent"&gt;Current Projects&lt;/span&gt;   &lt;span lang="en-us"&gt;-&lt;/span&gt;&gt;  
        &lt;span id="child"&gt;Upcoming&lt;/span&gt;&lt;/b&gt;&lt;/font&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/BODY&gt;

you could simplify your code and content like this and keep all the formatting:

&lt;head&gt;
        &lt;style type="text/css"&gt;&lt;!--
        #status, #parent, #child, #arrow { font: bold xx-small verdana, sans-serif; padding: 0em .25em; }
        #parent, #child { color: black; }
        #status { color: #808080; }
        #navbar { padding: .5em; }
        --&gt;&lt;/style&gt;
&lt;/head&gt;
&lt;BODY&gt;
&lt;p&gt;
        &lt;a href="#" onclick="ChangeParent();"&gt;Change Parent&lt;/a&gt;&lt;br&gt;
        &lt;a href="#" onclick="ChangeChild();"&gt;Change Child&lt;/a&gt;
&lt;/p&gt;
&lt;div id="navbar"&gt;
        &lt;span id="status"&gt;You Are Viewing:&lt;/span&gt;
        &lt;span id="parent"&gt;Current Projects&lt;/span&gt;
        &lt;span id="arrow"&gt;-&gt;&lt;/span&gt;
        &lt;span id="child"&gt;Upcoming&lt;/span&gt;
&lt;/div&gt;
&lt;/BODY&gt;

Do you see how the HTML body is a lot more legible? You can easily see the words of the navbar in your HTML code. CSS is powerful. Take advantage of it. Follow these links to learn more...

Why CSS is great

A List Apart

Glish

As for the javascript, you can remove the color changing code if you don't want it. Just remove the javascript lines that deal with setting the color. Did you see what the link tags are doing? Each link tag is calling a different javascript function. To make both the parent and child change, just make both link tags point to the same function. After that, merge the existing 2 functions into 1. If you can't understand this very simple piece of javascript code, you should start learning. Find tutorials here:

W3C Schools on Javascript

Some random JS tutorial site

Google is your friend

Link to comment
Share on other sites

  • 0

ill take your advice when im writing the final code.. only thing now is i need.. to be able to change..

ID=parent and ID=child with 1 onclick function instead of 2... not sure how to do that one!! thanks man! for the help and advice.. it looks alot better

Link to comment
Share on other sites

  • 0

I already explained how to do it above. If you couldn't find it, here it is again...

As for the javascript, you can remove the color changing code if you don't want it. Just remove the javascript lines that deal with setting the color. Did you see what the link tags are doing? Each link tag is calling a different javascript function. To make both the parent and child change, just make both link tags point to the same function. After that, merge the existing 2 functions into 1. If you can't understand this very simple piece of javascript code, you should start learning. Find tutorials here:

W3C Schools on Javascript

Some random JS tutorial site

Google is your friend

If you just want somebody to write out all the JS code for you, I'm sure someone else will be willing to do it. It's a really trivial change for a beginner and I've already had the practice.

Link to comment
Share on other sites

  • 0

<script type="text/javascript"><!--

function Change1()

{

var ParentField = document.getElementById("parent");

var ParentFieldText = ParentField.firstChild;

if( ParentFieldText.nodeValue == "Customer Service" )

{

ParentFieldText.nodeValue = "Happy Parent";

}

else

{

ParentFieldText.nodeValue = "Customer Service";

{

var ChildField = document.getElementById("child");

var ChildFieldText = ChildField.firstChild;

if( ChildFieldText.nodeValue == "Sad Child" )

{

ChildFieldText.nodeValue = "Happy Child";

}

else

{

ChildFieldText.nodeValue = "Sad Child";

}

}

}

}

im not a idiot.. i did that.. and i took the color out.. but... im not sure about the... ParentFieldText.nodeValue = do i really need that....i mean... i dont plan on using the feature of changing the text back to anything.. i want to keep it.. where someone clicks..

just wondering if i needed it

Link to comment
Share on other sites

  • 0

Maybe you need it; maybe you don't. Based on this information alone...

when ya click on change parent i need the text Current Projects to say current projects1 and upcomming to change to upcomming1 with just 1 url instead of the 2 urls you have...

ParentFieldText.nodeValue = do i really need that....i mean... i dont plan on using the feature of changing the text back to anything.. i want to keep it.. where someone clicks..

I no longer have any idea how you want this to behave. But, it sounds really complicated. In any case, it seems like you fully understand how the current code works now...

onclick="Change1();" is an attribute in the link tag that tells the browser to execute the Change1() function when the link is clicked on.

ParentFieldText.nodeValue controls the text for ID="parent".

ChildFieldText.nodeValue controls the text for ID="child".

Now you have complete control of the text in the parent and child fields. Just make it output what you want, when you want. If you want something to change permanently, just assign it once and be done with it. If you want it to alternate between a couple phrases, add some conditionals (aka if...else statements). If you want it to change based on other factors, add some different conditionals.

If the solution you want seems pretty obvious to you, it probably is. Your browser isn't going to explode if you do something wrong. Just try what you think will work and see if it actually works. It only takes a couple seconds to make corrections and retest, unless you're using some crazy HTML editor. If after trying a few different implementations, it doesn't work out the way you want, just post the implementations you've tried, what specifically went wrong with each, and what you expected to happen.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.