Formatting JavaScript text output.

Posted on 2012-09-07
Last Modified: 2012-09-07
I am designing a web page that will look like the page at

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,,  
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!';
		case 2:
    bookshelfText = 'Bookshelf 2';
	bookshelfText ='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!';*/
		case 3:
    bookshelfText = 'Songs for performance for the elementary classroom and children\'s chorus\r\r\tSongbooks\r\r\tThe Joy of Children Musicals';
		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.';
		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!';

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
and clicking on Bookshelf 2.

How do I get the bolds and links in the text to format and function properly?
Question by:gpinzino
    LVL 58

    Expert Comment


    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.
    LVL 1

    Author Comment

    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
    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.
    LVL 58

    Accepted Solution

    As I said earlier

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Android App Development

    This course will involve creating widgets, customize list view, grid view, spinners, etc. Creating applications using audio, video, and SQLite database. Ending with publication on Google Play.

    Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

    779 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

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now