Issue with changing specific table cell content background

Question

I am trying to make a table that once created and one animal is randomly selected to go into a cell from an array, the animal can be selected from a dropdown menu and will change the color of all the elements in the table containing this animal.

Here is a link to my work I have uploaded, the function for this color change for cat specifically is on line 149. My issue is once I select cat in the dropdown menu I get nothing.?

FIDDLE

Target code:

function catColor() {
    var tdTags = document.getElementsByTagName("td");
    var searchText = "cat";

    for (var i = 0; i < tdTags.length; i++) {
        if (tdTags[i].textContent == searchText) {
            document.tdTags[i].style.backgroundColor = "blue";
        }
    }
}

Answer 1

Don't do this:

cat.addEventListener("select", function() { // WRONG !!!!!
    catColor();
})

Do this:

var animalSelect = document.getElementById("dropDown");
animalSelect .addEventListener("change", function(ev) {
    var selectedAnimal = ev.currentTarget.value;
    console.log(selectedAnimal);
})

Also, don't do this:

document.tdTags[i].style.backgroundColor = "blue"; // WRONG !!!!!

Do this:

tdTags[i].style.backgroundColor = "blue";