This is a simplified version of my script. Basically at load I want to run through an array of object ids, and assign functions to them to open drop down menus. The problem I'm having is that the parameters that are being passed to the function are being sent as the last instance of the variable, not the one assigned at the time of assigning the function. Example:
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Untitled Page</title>
<script type="text/javascript"><!--
var buttons = new Array("btnOne","btnTwo");
window.onload = function() {
for (x in buttons) {
btnName = buttons[x];
btnBox = "DD" + btnName;
document.getElementById(btnName).onclick = function() {
document.getElementById(btnBox).style.display = "block";
}
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<p><button id="btnOne" name="btnOne" type="button">Button1</button></p>
<p id="DDbtnOne" style="display:none">This is button 1's Text</p>
<p><button id="btnTwo" name="btnTwo" type="button">Button2</button></p>
<p id="DDbtnTwo" style="display:none">This is button 2's Text</p>
</body>
</html>
Basically this assigns an function that shows a div when you click the button. Now when you click either it shows #2's text, because at the time of clicking the button, btnBox = "DDbtnTwo" as it was the last thing in the loop. How can I have it assign a string based on the variable at the time of assigning the varible, not at the time the user clicks on it? Basically doing this:
Code:
document.getElementById("DDbtnOne").onclick = function() {
document.getElementById("DDbtnOne").style.display = "block";
}
document.getElementById("DDbtnTwo").onclick = function() {
document.getElementById("DDbtnTwo").style.display = "block";
}
But being able to loop through it. Any ideas? Thanks.
Last edited by funkdaddu; 06-22-2006 at 01:29 PM..
|
