JS Change Element's Color onclick

Question

I want to make a program that changes the selected elements color on clicks. For example: First click > Green. Second click > Blue. Third click > Default color (orange). I stucked in an error and I don't know how to fix it. Any idea how to make it?

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` is out of scope in `setGreen`. If it wasn’t, `items.style.color === 'orange'` still wouldn’t make sense because `HTMLCollection`s don’t have a `style` property. See [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/q/10693845/4642212). Why not just change the class name of a parent element and define all colors in CSS? — Sebastian Simon, Feb 22 '21 at 21:04
I also tried it with `document.getElementsByClassname('sid')` but didn't work — scrummy, Feb 22 '21 at 21:04
@scrummy There is no method on `document` that is called `getElementsByClassname`. — Sebastian Simon, Feb 22 '21 at 21:04
`items` does not have a color. `items` isn’t an element. You’re already correctly changing colors in `changeColor`. The color check in `setGreen` is just wrong. You could use `document.getElementsByClassName("sid")[0].style.color` to compare, but there are better ways. — Sebastian Simon, Feb 22 '21 at 21:09

Onlime · Accepted Answer · 2021-03-01T15:29:20.973

The error is that the function setGreen() can't get the variables of the function changeColor(className, colorValue). You can change setGreen() into something like 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");
        }
    }
   
}

now the function knows what the items are and can work with them.

JS Change Element's Color onclick

1 Answers1