[IMAGE] IU SLIS logo

Demo page logo

Javascript

Here is a script writes text to the page and places it in a textbox

If you click on these links, text that amplifies these statements will appear in the text box on right side of the page.

Who we are

What we do

When we do it

Where we do it

How we do it

Why we do it

This is a two part script. The first part is in the <head> of the document:

<script language=javascript type="text/javascript">
<!-- Hide from older browsers
newInfo = new Array
newInfo[1] = "We are SLIS"
newInfo[2] = "We do information"
newInfo[3] = "We do it every day"
newInfo[4] = "We do it all over the place"
newInfo[5] = "We do it with style"
newInfo[6] = "Because we care"
function showInfo(thisNew) {
    document.menu.menuInfo.value = newInfo[thisNew]
    }

// End hiding -->
</script>

As we have seen, this type of script defines an array, but in this case, the array contains text objects instead of images. In this array, we have defined a variable called newInfo that contains six instances.

Then we have defined a function called showInfo and another variable called thisNew. This is followed by an instruction based on the Document Object Model which guides the browser to the location in the page where the text defined in the array will be displayed.

Here is the second part of the script, which can be placed anywhere in the <body>: of the document:

<p>
<a href="javascript:showInfo(1)">Who we are</a>
</p>
<p>
<a href="javascript:showInfo(2)">What we do</a>
</p>
<p>
<a href="javascript:showInfo(3)">When we do it</a>
</p>
<p>
<a href="javascript:showInfo(4)">Where we do it</a>
</p>
<p>
<a href="javascript:showInfo(5)">How we do it</a>
</p>
<p>
<a href="javascript:showInfo(6)">Why we do it</a>
</p>

Here is where the function is called. The numbers refer back to the array defined in the <head> of the document.

And finally, here is the markup for the form. It contains no javascript:

<form name="menu">
<textarea rows="2" cols="40" name="menuInfo" readonly wrap>
Click on the links to find out stuff
</textarea>
</form>

Return to Javascript for home use.

Page by Howard Rosenbaum
Find me at hrosenba@indiana.edu http://www.slis.indiana.edu/hrosenba/www/Demo/textbox.html