Computer Science Canada

dynamic text
Author:  turing91 [ Thu Feb 07, 2008 4:48 pm ]
Post subject:  dynamic text
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.
Author:  OneOffDriveByPoster [ Thu Feb 07, 2008 6:41 pm ]
Post subject:  Re: dynamic text
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)
Author:  turing91 [ Sun Feb 10, 2008 1:23 am ]
Post subject:  Re: dynamic text
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.

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy