We help IT Professionals succeed at work.

Using Javascript to change text

leawasson
leawasson asked
on
303 Views
Last Modified: 2013-11-05
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.
Comment
Watch Question

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
b0lsc0ttIT Manager
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
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
@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>
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];

Author

Commented:
Thank you very much for your answers and very quick responses.  The innerHTML works perfectly.
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
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

Author

Commented:
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
b0lsc0ttIT Manager
CERTIFIED EXPERT

Commented:
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
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.