Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Adam Ridgley
Adam Ridgley
12,255 Points

Javascript error

Hi all,

I have a little script which finds duplicate values in a set of th elements, it seems to work fine but in the console it says this: 'Uncaught TypeError: Cannot read property 'innerHTML' of undefined'

Here is my code:

<table>
<tr>
<th scope="row" class="transaction_id">12345</th>
<td>Name</td>
<td>Total</td>
</tr>

<tr>
<th scope="row" class="transaction_id">12345</th>
<td>Name</td>
<td>Total</td>
</tr>
</table>

And the JavaScript:

var transactions = document.getElementsByClassName('transaction_id');

var i = 0;

while (i <= transactions.length) {
var x = transactions[i];
i++;
var y = transactions[i];

  if (x.innerHTML == y.innerHTML) {
      x.style.background = "orange";
      y.style.background = "orange";
  }

}

Don't know if there was a better/easier way of finding duplicate strings but that's what I came up with. Anyway it appears to work fine but I don't know why I'm getting the error?

Thanks, Adam

2 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

The error is being caused by the fact that once you get to the length of the array there is no y to check. To avoid this you will need to limit the check to one less than the array length. This way y will exist and not be undefined.

while (i <= transactions.length - 1) { }

There are potential issues with this because you are only checking the current and the next items in the array. To check for duplicates among all items you will need to use a for loop.

Adam Ridgley
Adam Ridgley
12,255 Points

Thanks for the reply,

I tried transactions.length - 1 but I still had the error, I did however manage to get it working by using an if statement to check whether x and y are not false values: 

if (x && y) {
    if (x.innerHTML == y.innerHTML) {
        x.style.background = "orange";
        y.style.background = "orange";
    }
}

Thanks again for your help :)

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Here is an updated answer which shows how to loop through all the items and compare the current item with every other item.

Check out the Codepen example or see the following code:

Note: The pen has console messages for further verification.

var transactions = document.getElementsByClassName('transaction_id');
var tlen = transactions.length;
var i = 0;

while (i < tlen) {
  var x = transactions[i];

  for (var index = 0; index < tlen - 1; index ++) {
    var y = transactions[index];

    if (index !== i && x.innerHTML === y.innerHTML) {
        x.style.background = y.style.background = "orange";
    }
  }

  i++;
}