dynamic text

turing91 · **Posted:** Thu Feb 07, 2008 4:48 pm

Well, I think that's what it would be considered. Anyways, I have a simple project where I'm making a website that has a drop down menu with a list of items. I also have a table which will define the items. What i want to know is how to change the text in one of the table boxes when a new item in the drop down menu is selected.

This is the code i have so far...

code:

<html>
<head>
<title>
My Definitions
</title>
</head>
<body>

<script type="text/javascript">

var define= new array()
define["Unicode"] = "unicoded"
define["Hexadecimal"] = "hex"
define["Binary"] = "bin"
define["Compiler"] = "compil"
define["Interpreter"] = "inter"
define["Topology"] = "top"
define["Server"] = "ser"
define["Overflow Error"] = "of"
define["Phishing"] = "phish"
define["Network"] = "net"

function definition(def)
{

}
</script>

Select a definition from the list:
<select id="list">
<option>Unicode</option>
<option>Hexadecimal</option>
<option>Binary</option>
</select>
<br>
<br>
<table border="1" width="100" cellpadding="5">
<th>Definition:</th>
<th>Picture:</th>
<tr><td>two</td>
<td>one</td></tr>
</table>
</body>
</html>

any help would be greatly appreciated.

OneOffDriveByPoster · **Posted:** Thu Feb 07, 2008 6:41 pm

Wrong place to post...

Anyhow

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
My Definitions
</title>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii">
</head>
<body onload="init();">

<script type="text/javascript">

var define;
var selList;
var tdDef;

function init()
{
selList = document.getElementById("list");
tdDef = document.getElementById("def");
define = new Object;
define["Unicode"] = "unicoded";
define["Hexadecimal"] = "hex";
define["Binary"] = "bin";
define["Compiler"] = "compil";
define["Interpreter"] = "inter";
define["Topology"] = "top";
define["Server"] = "ser";
define["Overflow Error"] = "of";
define["Phishing"] = "phish";
define["Network"] = "net";
setDefText();
}

function definition(def)
{
return define[def];
}

function setDefText()
{
var idxSel = selList.selectedIndex;
var strSel = selList.options.item(idxSel).text;
tdDef.firstChild.nodeValue = definition(strSel);
}
</script>

Select a definition from the list:
<select id="list" onchange="setDefText();">
<option>Unicode</option>
<option>Hexadecimal</option>
<option>Binary</option>
</select>
<br>
<br>
<table border="1" width="100" cellpadding="5">
<tr><th>Definition:</th><th>Picture:</th></tr>
<tr><td id="def">--</td><td id="pic"></td></tr>
</table>
</body>
</html>

Have fun:
http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/ecma-script-binding.html
http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/ecma-script-binding.html

Edited by OneOffDriveByPoster: fixed bug (code was IE-specific by accident)

turing91 · **Posted:** Sun Feb 10, 2008 1:23 am

thanks a lot! +karma for you!

edit: sorry I checked the tutorials for help first and i guess i forgot to go to the help section.

	Computer Science Canada Programming C, C++, Java, PHP, Ruby, Turing, VB Username: Password: Register
Wiki Blog Search Turing Chat Room Members