JS改变元素的颜色onclick答案

【问题标题】：JS Change Element's Color onclickJS改变元素的颜色onclick
【发布时间】：2021-05-25 03:34:16
【问题描述】：

我想制作一个程序，在点击时更改所选元素的颜色。例如：首先单击 > 绿色。第二次单击 > 蓝色。第三次单击 > 默认颜色（橙色）。我陷入了一个错误，我不知道如何解决它。知道怎么做吗？

function changeColor(className, colorValue) {

    var items = document.getElementsByClassName(className);
  for (var i=0; i < items.length; i++) {
    items[i].style.color = colorValue;
  }

}

function setGreen () {
if (items.style.color === 'orange') {
    changeColor("sid", "red");
}
}

.sid {
  color: orange;
}

<span class="sid">STH</span><br>
<span class="sid">STH</span><br>
<span class="sid">STH</span><br>
<span class="sid">STH</span><br>
<br>
<button onclick="setGreen()">Change Color</button>

【问题讨论】：

items 超出了setGreen 的范围。如果不是，items.style.color === 'orange' 仍然没有意义，因为HTMLCollections 没有style 属性。见What do querySelectorAll and getElementsBy* methods return?。为什么不直接更改父元素的类名并在 CSS 中定义所有颜色？
我也尝试过document.getElementsByClassname('sid')，但没有成功
@scrummy document 上没有名为 getElementsByClassname 的方法。
那我该怎么参考呢？
@scrummy 指的是什么？

标签： javascript html jquery css colors

【解决方案1】：

错误是函数setGreen()无法获取函数changeColor(className, colorValue)的变量。您可以将 setGreen() 更改为 this 之类的内容：

 function setGreen() {
    var items = document.getElementsByClassName("sid");      
    for (var i = 0; i < items.length; i++) {           
        if (items[i].style.color === 'orange') {
            changeColor("sid", "red");
        }
    }
   
}

现在该函数知道这些项目是什么并且可以使用它们。

【讨论】：