Trouble understanding DOM API

Question

The background color is getting applied to only c1 class and not c2 even though the code is same. When i inspect it I am getting

Uncaught TypeError: Cannot set property 'backgroundColor' of undefined

for the first class itself. I can’t find anything wrong with the code:

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
     table,th,td{
         border: 1px solid black;
         border-collapse: collapse;
         

     }

     
    </style>
    <table style="width:75%" >
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
        <tr class='c1'>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr class='c2'>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
        </tr>
          <tr class='c1'>
            <td>John</td>
            <td>Doe</td>
            <td>80</td>
          </tr>
          <tr class='c2'>
            <td>Greg</td>
            <td>House</td>
            <td>50</td>
          </tr>
    
      </table>
      <script>
        var c1=document.getElementsByClassName('c1');
        console.log(c1)
        for(i in c1)
        {
            c1[i].style.backgroundColor='aqua';
        }
        var c2=document.getElementsByClassName('c2');
        for(var j in c2)
        {
          c2[j].style.backgroundColor='coral';
        }
      </script>

</body>
</html>

Don't use `for ... in` to loop through an array. See solutions [here](https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements). — TiiJ7, Aug 23 '20 at 16:12
@TiiJ7 so in short the variable c1 is not per say an array but a different type called HTMLCollection? — Kaushal_Kulkarni, Aug 23 '20 at 16:35
`getElementsByClassName` does return a `HTMLCollection` (see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) for details), which is why I linked to that post. `HTMLCollection` is "array-like" (acts like an array, but is not one). But the advice is the same for arrays and array-like objects. Some more info [here](https://stackoverflow.com/questions/500504/why-is-using-for-in-for-array-iteration-a-bad-idea). — TiiJ7, Aug 23 '20 at 17:06

Booboo · Answer 1 · 2020-08-23T16:48:39.980

You have several issues:

The <STYLE> tag should be in the <HEAD> section.
The JavaScript code that attempts to set the background color is best run after you are sure the DOM has been initialized. It will now be invoked on the onload event.
The proper way to step through the collection of elements is to use: for elem of array.

window.onload = function() {
        var c1=document.getElementsByClassName('c1');
        //console.log(c1)
        for(let elem of c1)
        {
            elem.style.backgroundColor='aqua';
        }
        var c2=document.getElementsByClassName('c2');
        //console.log(c2);
        for(let elem of c2)
        {
          elem.style.backgroundColor='coral';
        }
};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
     table,th,td{
         border: 1px solid black;
         border-collapse: collapse;
         

     }    
    </style> 
    <title>Document</title>
</head>
<body>
   <table style="width:75%" >
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Age</th>
        </tr>
        <tr class='c1'>
          <td>Jill</td>
          <td>Smith</td>
          <td>50</td>
        </tr>
        <tr class='c2'>
          <td>Eve</td>
          <td>Jackson</td>
          <td>94</td>
        </tr>
          <tr class='c1'>
            <td>John</td>
            <td>Doe</td>
            <td>80</td>
          </tr>
          <tr class='c2'>
            <td>Greg</td>
            <td>House</td>
            <td>50</td>
          </tr>
    
      </table>

</body>
</html>

Trouble understanding DOM API

1 Answers1