Javascript: Uncaught TypeError: Cannot set property 'className' of undefined

Question

I have a table with an onclick function on it. When clicked upon I get the following error: Uncaught TypeError: Cannot set property 'className' of undefined

The strange thing is that 3 out of 5 rows the class is changed, but 2/5 are not. When clicked again on the row, one of the remaining two is changed and when clicked again the last one is changed. Here's my code:

HTML table

<tr class='invoice-tr-standard row5' onClick="FormTRClick(event, '6', '5')"><td><input type='checkbox' name='strFormFactuur[]' value='19500' id='chk6'>&nbsp;<img src='../images/link.png' border='0'></td>    
    <td><img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;' onClick="saveData('6', '?iID=19500&bType=0', 'all');")> <input type='image' src='../images/toevoegen.png' border='0' style='float: right; cursor: pointer;' name='FormDupliceer' value='19500'></td>    
</tr>
<tr class='invoice-tr-standard row5' onClick="FormTRClick(event, '7', '5')"><td></td>    
    <td><img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;' onClick="saveData('7', '?iID=36&bType=1', 'fltBedrag');"> <input type='image' src='../images/b_delete.png' border='0' style='float: right; cursor: pointer;' name='FormVerwijder' value='36'></td>    
</tr>
<tr class='invoice-tr-standard row5' onClick="FormTRClick(event, '8', '5')"><td></td>    
    <td><img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;' onClick="saveData('8', '?iID=37&bType=1', 'fltBedrag');"> <input type='image' src='../images/b_delete.png' border='0' style='float: right; cursor: pointer;' name='FormVerwijder' value='37'></td>    
</tr>
<tr class='invoice-tr-standard row5' onClick="FormTRClick(event, '9', '5')"><td></td>    
    <td><img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;' onClick="saveData('9', '?iID=38&bType=1', 'fltBedrag');"> <input type='image' src='../images/b_delete.png' border='0' style='float: right; cursor: pointer;' name='FormVerwijder' value='38'></td>    
</tr>
<tr class='invoice-tr-standard row5' onClick="FormTRClick(event, '10', '5')"><td></td>    
    <td><img src='../images/b_save.png' border='0' height='13px' style='cursor: pointer;' onClick="saveData('10', '?iID=66&bType=1', 'fltBedrag');"> <input type='image' src='../images/b_delete.png' border='0' style='float: right; cursor: pointer;' name='FormVerwijder' value='66'></td>    
</tr>

The javascript function FormTRClick():

function FormTRClick(event, uID, PCID) {
    var Object= event.target.tagName;   
    if (Object == 'TD') {
        var Elements = document.getElementsByClassName('row' + PCID);
        var iNumElements = Elements.length;
        alert(iNumElements); // Outputs 5 as expected
        for (var i=0; i < iNumElements; i++) {
            Elements[i].className = "invoice-tr-clicked"; // Only changes 3 out of 5 on the first click         
        }
    }
}

Update

When using the following Elements[i].className += " invoice-tr-clicked"; instead of Elements[i].className = "invoice-tr-clicked";, the script works as it should. But when replacing (hence the =) I get the Cannot set property 'className' of undefined error.

I tried to reconstruct your example here: jsbin.com/ugojaj/edit#javascript,html But I could not reproduce the error. Could you provide a working SSCCE? — Ben
– Ben, Commented Aug 18, 2011 at 7:45
@Ben I've changed the code a little bit and it works as expected, but not in my environment. This code works: jsbin.com/ugojaj/2 I have to play around with it. — Devator
– Devator, Commented Aug 18, 2011 at 7:52

Devator · Accepted Answer · 2011-08-18 08:49:36Z

1

I've fixed it by replacing

 Elements[i].className = "invoice-tr-clicked";

with

 Elements[i].className = "invoice-tr-clicked row" + PCID;

Doesn't make any sense it works now, since the demo works without problems.

answered Aug 18, 2011 at 8:49

Devator

3,9145 gold badges36 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript: Uncaught TypeError: Cannot set property 'className' of undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related