根据是否包含某个单词来更改许多字符串的背景颜色？

Question

我正在尝试检查一堆字符串是否包含某个单词。如果该类的单个成员具有指定的单词（“不太可能”），那么我将背景颜色更改为绿色。如果该类的单个成员没有，则背景颜色为红色。所以最终的结果将是一群具有绿色背景的班级成员和其他具有红色背景的成员。

我的代码不起作用。

这是我尝试过的。

function colorCoding() {
    var str = document.getElementsByClassName("colorString").innerHTML;
    var n = str.includes("unlikely");
    if (n==true) {
      document.getElementById("colorString").style.backgroundColor = "green";
    } else {
      document.getElementById("colorString").style.backgroundColor = "red";
    }
}

背景颜色完全没有变化。

我已经尝试为每个单独的 ID 执行此操作——并且成功了——但这将花费我很长时间才能遍历类的每个成员并根据他们的单独 ID 创建一个函数。有没有办法在课堂上做到这一点？或者没有类，但仍然对整个集合使用一个函数？

感谢您的帮助！

Answer 1

问题在于document.getElementsByClassName("colorString").innerHTML。您必须包含索引。应该是document.getElementsByClassName("colorString")[0].innerHTML。

document.getElementsByClassName() 返回具有该类名的元素数组。

for循环：-

 var i;

 var str = document.getElementsByClassName("colorString");
 for (i = 0; i < str.length; i++) {

    if(str[i].innerHTML.includes("unlikely")) { 
      str[i].style.backgroundColor = "green";
  } else {
  str[i].style.backgroundColor = "red";
}

 }