undefined ID in javascript when ID is passed from PHP variable

Question

I've done some searches and I've come up with no clear answer. I'm not a javascript person at all and am pretty clueless. PHP I understand however, and to me this should work. I should also note, that this script used to use document.all for it's javascript, which I've tried to update to getElementById() when possible (since document.all was throwing an error in firebug).

Now for the most part, the page displays fine, albeit without the javascript changes that are supposed to happen.

I must also apologize for the archaic nature of the code, I inherited this code when I took over as inte.net guy for our gaming club. This code is for the purchase of fictional items using fictional credits.

When I click an item to "buy" it (or maybe not whichever) The background of that row is supposed to turn green, and the credits are supposed to be subtracted from my total account (or reverse if I uncheck the box). Clicking the submit button adds this stuff I clicked to another sheet, and subtracts the actual amount from my account.

Currently I get a "tr615 is undefined" error This is the PHP generated code for the element as shown below.

If someone can help me figure this out it would fantastic. I just can't seem to find an answer after a few days of searching google and here.

PHP Snippet of relevent code: (we use custom functions on our site ie: entry)

For instance say $id=615

    <?php
        while (list ($id, $name, $class, $desc, $range, $damage, $cost,$hide) = entry ($items) )
        {
           if ($hide =='0')
           {
            $JavaScriptArrayParms .= '"' . $id . '",';
            $list .= $id . ',';
           ?>
           <tr id="tr<?php echo $id; ?>">  //Thus tr615 for this example
           <td>
             <input type="checkbox" name="chk<?php echo $id; ?>" onclick="updateStoreTable(this.form, this, <?php echo $id; ?>)" />
             <input type="hidden" name="cost<?php echo $id; ?>" value="<?php echo $cost; ?>" />
           </td>
           <td><?php echo $name; ?></td>
           <?php if (! in_array($catid, $noclass)){ echo "<td>$class</td>";}?>
           <td><?php echo $desc; ?></td>
           <?php if (! in_array($catid, $norange)){ echo "<td>$range</td>";}?>
           <td><?php echo $damage; ?></td>
           <td><?php echo $cost; ?></td>
           </tr>
         <?php
        }
        }
        ?>
    </table>

 <input type="hidden" name="list" value="<?php echo $list; ?>" />
 <input type="button" value="Purchase!" onclick='validatePurchase(this)' />
 <input type="reset">
</form>

Relevant JS: (which used to be document.all.store... or just document.all.. in some cases. I hope I fixed it the right way)

<script language="javascript">
var startmoney = <?php echo $currMoney; ?>;
function canAfford(t,id)
{
    if(t.checked) return;// don't touch if checked for buying.
    //alert("canAfford("+t+","+id+");");
    //t.disabled = false;
    eval("document.store.getElementByID(foo).disabled = false;");
    eval("document.store.getElementByID(foo).checked = false;");
    eval("document.getElementByID(tr"+id+").style.background = '#000000';");
}

function cantAfford(t,id)
{
    //alert("cantAfford("+t.disabled+","+id+")-- "+t+";");
    //alert("before disable");
    //t.disabled = true;
    eval("document.store.getElementByID(chk"+id+").disabled = "+true+";");
    //alert("After disable");
    eval("document.store.getElementByID(chk"+id+").checked = false;");
    eval("document.getElementByID(tr"+id+").style.background = '#555555';");
}

function getCost(id)
{
return eval("document.store.getElementByID(cost"+id+").value");
}

function buying(t,id)
{
eval("document.getElementByID(tr"+id+").style.background = 'green';");
document.store.credits.value -= getCost(id);
}

function notbuying(t,id)
{
eval("document.getElementByID(tr"+id+").style.background = '#000000';");
var creds = new Number(document.store.credits.value);
var cost  = new Number(getCost(id));
document.store.credits.value = (creds + cost);
}

function updateStoreTable(f,t,id) 
{
    var ids = new Array(<?php echo $JavaScriptArrayParms; ?>);
    if(t.checked)
        buying(t,id);
    else
        notbuying(t,id);

for(i = 0; i<ids.length; i++)
    {
        cost = new Number(getCost(ids[i]));
        creds = new Number(f.credits.value);
        //alert("COST: " +(cost)+"\nCREDITS: "+creds+"\nID: "+ids[i]);
    //  alert("'"+ (cost) + "' > '" + (creds) +"'\n"+(eval(cost > creds)));
    //  alert("f.chk"+ids[i]+".checked");
        if(eval("f.chk"+ids[i]+".checked")) { continue; } //ignore already carted items     

        if(eval(cost > creds))
            cantAfford(eval("f.chk"+id),ids[i]);
        else 
            canAfford(eval("f.chk"+id),ids[i]);     
    }
}

Answer 1

1st issue:

it has to be getElementById()
(a lower-case d at the end)

---

2nd:

When using eval, the code will be evaluated as:

document.getElementById(tr615).style.background = '#000000';

..what will force the error, because the tr615 is not enclosed by quotes, so javascript expects a variable tr615.

the line must look like this:

eval("document.getElementById('tr"+id+"').style.background = '#000000';");

---

But: Why do you use eval here, this can be done without eval:

document.getElementById('tr'+id).style.background = '#000000';