javascript - 更改特定表格单元格内容背景的问题

Question

我正在尝试制作一个表格，一旦创建，就会随机选择一只动物进入数组中的单元格，可以从下拉菜单中选择该动物，并将更改表格中包含的所有元素的颜色这种动物。

这是我上传的作品的链接，针对猫的颜色更改的函数具体位于第 149 行。我的问题是，一旦我在下拉菜单中选择猫，我什么也得不到。？

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

不要这样做:

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

这样做:

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

另外，不要这样做:

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

这样做:

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