Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Formatting JavaScript text output.

Posted on 2012-09-07
3
Medium Priority
?
484 Views
Last Modified: 2012-09-07
I am designing a web page that will look like the page at
http://comechildrensing.com/song_library/songbooks_9-5-12.php.

If you click on any of the bookshelf options in the left box, explanatory text will appear in the right box. The page as you see it here is very inefficient as it loads a new page for each link. I want to create a single page and use JavaScript to display the appropriate text when a link is clicked. I created a new page,
http://comechildrensing.com/song_library/songbooks.php,  
which includes a function, getBookshelfText(textNo), which displays the appropriate text in a <textarea> in the right box.

	<script type="text/javascript">
    function getBookshelfText(textNo) {
    var bookshelfText;
	switch (textNo){
		case 1:
    bookshelfText ='Songs for all levels from early childhood through choral performance \r \r\tSongbooks\r\r\tDance, Merry Voices!\r\r\tCherry Blossoms\r\r\tOh, You Can Sing!\r\r\tCome Children, Sing!';
		break;
		case 2:
    bookshelfText = 'Bookshelf 2';
	bookshelfText = bookshelfText.link('songbooks_2.php');
	/*'Songs for performance for the elementary classroom and children\'s chorus\r\r\tSongbooks\r\r\tA Bug Collection\r\r\tA Carousel of Animals\r\r\tSongs of the Sea\r\r\tCome Caroling, Children!\r\r\tThere\'s a Train Comin\'\r\r\tThe Dream Keeper\r\r\tI Stood Upon a Star\r\r\tBehold, the Hippopotamus!';*/
		break;
		case 3:
    bookshelfText = 'Songs for performance for the elementary classroom and children\'s chorus\r\r\tSongbooks\r\r\tThe Joy of Children Musicals';
		break;
		case 4:
    bookshelfText = 'Songs for children\'s church choir, including settings with Orff instruments\r\r\tSongbooks\r\r\tCome Children, Praise!\r\r\tSing a New Song Unto the Lord.';
		break;
		case 5:
    bookshelfText = 'Songs and chants without words in various tonalities and meters for children of all ages\r\r\tSongbooks\r\r\tSing We and Chant It!';
		break;
	}
	document.getElementById("carLink").value=bookshelfText;
	}
	</script>

Open in new window


The problem is, when I add formatting and links to the text, the HTML is printed rather than being interpreted by the browser. For example, the code
   
bookshelfText = 'Bookshelf 2';
bookshelfText = bookshelfText.bold();

Open in new window

displays as “<B>Bookshelf 2</B>”.

Setting up links using the “link(URL)” method produces similar results. You can see an example of this problem by going to http://comechildrensing.com/song_library/songbooks.php 
and clicking on Bookshelf 2.

How do I get the bolds and links in the text to format and function properly?
0
Comment
Question by:gpinzino
  • 2
3 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 38377037
document.getElementById("carLink").innerHTML=bookshelfText

Edit, you're using a textarea and you cannot add formatting (just like that)
You can achieve the same effect with a div as a textarea, so remove that and assign the id to a div in that area.
0
 
LVL 1

Author Comment

by:gpinzino
ID: 38377713
OK. I removed the <form> block and replaced it with <div id="carLink"></div>. When I loaded the page and tried the links I got no response. I then went to the last line of the script, dropped the value property and inserted the write() method, so that it now looks like
      document.getElementById("carLink").write(bookshelfText);
This time I got thrown out of the page and into the directory's index.php page.

I had tried your suggested approach earlier, but using the <p> tag and got the same result.
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 38377815
As I said earlier
document.getElementById("carLink").innerHTML=bookshelfText

value is set an element's value attribute
innerHTML replace the html of an element like div, span, p etc
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question