document.getElementById problems

[Tyrrell]

Hi,

I'm writing a script and am having trouble referencing text boxes using getElementById. If I pass the id as a variable it fails.

So...

document.getElementById("ABC").value; works but

var useMe = "ABC";
document.getElementById(useMe).value; does not work



I've included the important parts of what I've coded so far. Its slightly complicated but here goes.


The number of text boxes being created depends on two variables. I have used PHP to create nested for loops with an echo command to output the boxes...


$var1; // Is an array, holding various strings
$numVar1 = count($var1);

$var2; // Also an array, holding various ints number of elements always equal to $numVar1

for ($i = 0; $i < $numVar1; $i++)
{
for ($j = 0; $j < $var2[$i]; $j++)
{
echo "<input type=\"text\", name=\"$var1[$i]$j\" id=\"$var1[$i]$j\">";
}
}


I have tested the loop out and the values entered for name and id are as I want them to be. e.g.

If $var1={A,B,C} $var2={2,3,1}
I get text boxes with name and id... A0,A1,B0,B1,B2,C0

Later I try to reference the values in the text boxes. This is done using JavaScript. The variables are equivalent to the PHP variables used above.


for(var i = 0; i < numVar1; i++)
{
for(var j=0; j < var2; j++)
{
var getID = var1 + j;
var getVal = document.getElementById(getID).value;
}
}


The var getVal line is where my code fails. The value for getID is always as it should be. i.e. A0, B3, C1 etc...

I've tried assigning getID as an id for a text box that wasnt in the PHP loop and that worked as expected. I also tried hard coding in an id for a box that was in the PHP loop, and that worked as expected. To me it seems as if the variables I pass for the id are wrong, but as I stated before, I checked them and they aren't.

I hope I've explained what I'm trying to do clearly.

Any ideas?

Thanks,

James

 

[Kozusnik]

Have you tried .innerHTML rather than .value? I ran into the same problem before. Here's some of my code that works...
(This is a work in progress, hardcoding the shifts will be replaced with an array loop soon)
<js>
function cycleShifts(t) {
var f = document.frmSched;
var txt = document.getElementById(t).innerHTML;

if (txt == ""){
document.getElementById(t).innerHTML = "8a";
document.getElementById(t).style.background = "url(" + './modules/schedule/images/bg_yellow.png' + ")";
}
if (txt == "8a"){
document.getElementById(t).innerHTML = "11p";
document.getElementById(t).style.background = "url(" + './modules/schedule/images/bg_blue.png' + ")";
}
if (txt == "11p"){
document.getElementById(t).innerHTML = "";
document.getElementById(t).style.background = "url(" + './modules/schedule/images/bg_white.png' + ")";
}
}
</js>


<php>
$sql = "SELECT * FROM schedule_emps WHERE emp_dept=$dept";
$rows = db_loadList( $sql );

if($rowcount = 0){
}else{
foreach ($rows as $row) {
$r_id = $row["emp_id"];
$r_name = $row["emp_lname"] . ", " . $row["emp_fname"];
//$fld = $row["emp_lname"] . $row["emp_fname"];
$r_status = $row["emp_status"];
$r_hours = $row["emp_hours"];

$s .= '<form method="post">';
$s .= '<td valign="top" width="20%"><font size="2">' . $r_name . '</font></td>';
foreach ($darr as $k => $v){
$month = str_pad($month, 2 , "0", STR_PAD_LEFT);
$v = str_pad($v, 2 , "0", STR_PAD_LEFT);
$dt = "$year$month$v";
$t = $r_id . "_" . $dt;
$s .= "<td background='./modules/schedule/images/bg_white.png' id='$t' align='center' onClick=cycleShifts('$t')></td>";
}
$s .= '</td></tr></form>';
}
echo "$s\n";
}
</php>

Mark

 

[tsuji]

Top
That looks terribly confusing server-side variables with client-side variables... You have to build the global client-side image of those server-side variables if you want to keep those loops you seem to suggest. Like this, in the script section at the top(-most) part.
[tt]
<script language="javascript">
//these are global in scope
var var1=new Array();
<? for ($i=0;$i<count($var1);$i++) { ?>
var1[<?= $i ?>]="<?= $var1[$i] ?>";
<? } ?>
var numVar1=<?= count($var1) ?>;
var var2=new Array();
<? for ($i=0;$i<count($var2);$i++) { ?>
var2[<?= $i ?>]=<?= $var2[$i] ?>;
<? } ?>
//etc etc the rest
[/tt]
That shows the idea.