Can't retrieve the data from table using getAttribute() in Javascript

Question

Right now I'm learning nodes. before that I'm sorry if my question isn't specific please let me know how to state it better.

This code is for deleting element attributes. There's a color in the table column and when I press button the attribute bgcolor in td tag is gone.

When I run it, it always show tdelement is null? while I already use for statement to loop and check it.

And please answer it using Javascript .

function removeColor(color) 
{ 
  var table = document.getElementById("multi");
  var tdList = table.getElementsByTagName("td");

  // Loop through list <td> elements.
  for (var i = 0; i <= tdList.length; i++)
  {
    var tdElement = tdList.item(i);

    // Get the attribute.
    var colorAtt = tdElement.getAttribute("value");

    //If the attribute matches the color then delete attributes
    if (colorAtt == color)
    {
        tdElement.removeAttributeNode(colorAtt);
    }
  }
}

// the end for javascript -----------------

<table id="multi" border="1">
<tr>
    <td></td>
    <td bgcolor="#ff0000">1</td>
    <td bgcolor="#008000">2</td>
    <td bgcolor="#ffff00">3</td>
</tr>
<tr>
    <td bgcolor="#ff0000">1</td>
    <td bgcolor="#ff0000">1</td>
    <td bgcolor="#008000">2</td>
    <td bgcolor="#ffff00">3</td>
</tr>
<tr>
    <td bgcolor="#008000">2</td>
    <td bgcolor="#008000">2</td>
    <td bgcolor="#008000">4</td>
    <td bgcolor="#ffff00">6</td>
</tr>
<tr>
    <td bgcolor="#ffff00">3</td>
    <td bgcolor="#ffff00">3</td>
    <td bgcolor="#ffff00">6</td>
    <td bgcolor="#ffff00">9</td>
</tr>

</table>

<button onclick="removeColor('#ff0000')">Remove Red Background</button><br>

Answer 1

try this

function removeColor(color) 
{ 
  var table = document.getElementById("multi");
  var tdList = table.getElementsByTagName("td");

  // Loop through list <td> elements.
  for (var i = 0; i <= tdList.length; i++)
  {
    var tdElement = tdList.item(i);

    // Get the attribute.
    var colorAtt = tdElement.getAttributeNode("bgcolor");

    //If the attribute matches the color then delete attributes
    if (colorAtt && (colorAtt.value == color))
    {
        tdElement.removeAttributeNode(colorAtt);
    }
  }
}

using .getAttribute("value"); would try to get the attribute 'value' from the element. where you need to get the node .getAttributeNode("bgcolor"); .

Fiddle