Basic Javascript - Please help

[jakavan]

This is a nifty combo box code, but I'd like to be able to show html in the array's instead of just text. How can I modify this code.

Scroll below where it says "HTML GOES HERE". Right now if I put HTML it doesn't work, how can I modify this code so I can add html to that area and have it display in the text box.

Thank you so much for your help!

Jeff

<script language="JavaScript">
<!--

//Double Combo Box with Description Code- by Randall Wald (http://www.rwald.com)
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

var num_of_cats = 4; // This is the number of categories, including the first, blank, category.
var open_in_newwindow=1; //Set 1 to open links in new window, 0 for no.
var option_array = new Array(num_of_cats);

option_array[0] = new Array("You need to select a category"); // This is the first (blank) category. Don't mess with it.

option_array[1] = new Array("-- Select One --",
"Online",
"Mobile",
"Media");

option_array[2] = new Array("-- Select One --",
"Online",
"Mobile",
"Media");

option_array[3] = new Array("-- Select One --",
"Online",
"Mobile",
"Media");

var text_array = new Array(num_of_cats);

text_array[0] = new Array("Select a Year and Category Above"); // These are general instructions. Change them if you want, or keep them if you don't.

text_array[1] = new Array("These are some of my favorite technology sites. You should visit them.", // Note that the first entry here is a general description of this category. After than, they're descriptions of each link. Make sure that you don't put the first link first; the general description must be first.
"HTML GOES HERE",
"HTML GOES HERE",
"HTML GOES HERE");

text_array[2] = new Array("These days, it's important to keep up on the news. These sites will help you do that.",
"CNN. What list of news sites would be complete without it?",
"Here, you can get links to World News Tonight, or see video clips.");

text_array[3] = new Array("If you can't find it via other means, you'll need to find it with a search engine. These are some of the best.",
"Undoubtedly, the best search engine out there.",
"Their natural-language search sometimes comes up with results you won't get with other engines.");

var url_array = new Array(num_of_cats);

url_array[0] = new Array("#"); // The first category. This should have no items other than "#".

url_array[1] = new Array("#", // The second category; the first "real" category. Note the initial #. That is the category which says "Please select a link." It doesn't need a URL. Start putting the other URL's in after that first line.
"http://javascriptkit.com/",
"http://www.news.com/",
"http://www.wired.com/");

url_array[2] = new Array("#",
"http://www.cnn.com/",
"http://abcnews.go.com/");

url_array[3] = new Array("#",
"http://www.google.com/",
"http://www.aj.com/");

function switch_select()

{
for (loop = window.document.form_1.select_2.options.length-1; loop > 0; loop--)
{
window.document.form_1.select_2.options[loop] = null;
}

for (loop = 0; loop < option_array[window.document.form_1.select_1.selectedIndex].length; loop++)
{
window.document.form_1.select_2.options[loop] = new Option(option_array[window.document.form_1.select_1.selectedIndex][loop]);
}

window.document.form_1.select_2.selectedIndex = 0;
}

function switch_text()

{
window.document.form_1.textarea_1.value = text_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex];
}

function box()

{
if (window.document.form_1.select_2.selectedIndex == 0)
{
alert("Where do you think you're going?");
} else {
if (open_in_newwindow==1)
window.open(url_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex],"_blank");
else
window.location=url_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex]
}
}

function set_orig()

{
window.document.form_1.select_1.selectedIndex = 0;
window.document.form_1.select_2.selectedIndex = 0;
}

window.onload=set_orig

// -->
</script>

<form name="form_1" onSubmit="return false;" >

<br />
<!-- This should be the same as the general instructions in the above code. -->
<select name="select_1" onChange="switch_select(); switch_text();">
<option>-- Select a Year --</option>
<option>2009</option>
<option>2008</option>
<option>2007</option>
</select>
<select name="select_2" onChange="switch_text();">
<option>Select a category</option>
<option> </option>
<option> </option>
</select>
<br>
<br>
<textarea wrap="virtual" name="textarea_1" rows=6 cols=60 style="border:0px;">Here's how you use this box: First, you select a category in the Category drop-down. Then, select a link from the Link drop-down. Then, read the description in this box, or click Go to go to the page. If you ever need to see this help again, just go back to the top option in the Category box.</textarea>
</form>

<p align="center">&nbsp;</p>

[Old Pedant]

You can't.

You can't put HTML into a <textarea>. Period. It *will* show up as just text, not as rendered HTML.

The obvious answer is to stop using a <textarea>. Just use a <div>.

<div id="TEXT" style="...choose your own style..."></div>

and then change the JS code:

function switch_text()
{
   var form = document.form_1;
   var div = document.getElementById("TEXT");
   div.innerHTML = text_array[form.select_1.selectedIndex][form.select_2.selectedIndex];
}

That's assuming I read the JS code right, but I think I did.

Personally, I think that's some pretty ugly JS code, in general. If you learn about creating your own JS objects and then use arrays of objects, you could do better than this on your own.

[jmrker]

Same question responded to here.
See: http://www.webdeveloper.com/forum/sh...d.php?t=211531

Primary problem is that OP did a copy / paste / modify ---> missed some copy or paste.

I also agree, somewhat archaic code.