asked on

Using Javascript to change text

Is there a way to use javascript to change text (NOT an input field) on a page in an onclick event. I need to change text on my page based on what a user selects in a drowdown list.

ASKER CERTIFIED SOLUTION

bugs021997

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

b0lsc0tt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

b0lsc0tt

By the way, if you need help using this in your page or have a question then let me know. If you need help on your page then you will need to provide me details and code.

bol

bugs021997

@leawasson,

Here goes an example for you...

<html>
<head>
</head>
<body>
<table width="680" border="0" cellpadding="0" cellspacing="0">
<tr align="left" valign="top">
<td>
<p id="example3">I want to replace this text: <span id="ex3Span">right here </span>.</p>

<script type="text/javascript">

/*! sent 'this.selectedIndex' as parameter in call */
function replaceSpan(lvl)
{
// An array is easier to edit.
// Here it's defined and used at the same time.
var text =
[
"Sentence relating to option 1",
"Sentence relating to option 2",
"Sentence relating to option 3"/**/
][lvl-1];

var span = document.getElementById("ex3Span");
while(span.childNodes[0]) /* removing nodes */
span.removeChild(span.childNodes[0]);
span.appendChild(document.createTextNode(text));
}
</script>

<SELECT NAME = "option¦3¦7" id="option¦3¦7" onChange="replaceSpan(this.options[this.selectedIndex].value);">
<OPTIon VALUE = "1">Option 1
<OPTIon VALUE = "2">Option 2
<OPTIon VALUE = "3">Option 3
<OPTIon VALUE = "4">Option 4
</SELECT>
</td>
</tr>
</table>
</body>
</html>

bugs021997

You can keep increasing the array values based on the number of inputs....

var text =
[
"Sentence relating to option 1",
"Sentence relating to option 2",
"Sentence relating to option 3",
"Sentence relating to option 4",
"Sentence relating to option 5",
"Sentence relating to option 6"
][lvl-1];

leawasson

ASKER

Thank you very much for your answers and very quick responses. The innerHTML works perfectly.

b0lsc0tt

Leawasson,

Did you still have a question about this or need some help? I noticed the B grade. If we can provide some more info or help then just let us know. It is nice to have a chance to earn the A grade. If the answers really were perfect then it seems an A would be appropriate. :D

Thanks for the fun question. I'm glad I could help. Let me know if you have a question about anything I just mentioned.

bol

leawasson

ASKER

Good grief, I am really messing up today! First no points and then a B?!? Good grief!! Sorry b0lsc0tt, it must be sleep deprivaion. Please don't cut my answers off!! I promise to pull myself together for future questions!!!

Thanks again for the help.

Michelle

b0lsc0tt

Great. :D See you around and I won't avoid you. ;-)

Get some sleep. I was up way too late last night and am feeling "deprived" too. I have to be a little more careful as I work and help to prevent the mistakes.

Thanks for the post.

bol