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

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

这是我上载的工作的链接，此颜色专门用于cat的更改功能在第149行上。我的问题是，一旦在下拉菜单中选择cat，我一无所获。

FIDDLE


  目标代码：

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";
        }
    }
}

最佳答案

不要这样做：

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";