Question: Right now i have four images which are being dynamically presented on html. This is done via an onload function. Basically when i click on of those wheels I would like the image to change for around one second then go back. But right now only one wheel changes colour which is quite annoying.

```
function setWheels() {
            document.querySelector(".blue-wheel").innerHTML = "<img src='blue-dark.svg.svg' onclick='buttonEvent()'>";
            document.querySelector(".red-wheel").innerHTML = "<img src='red-dark.svg.svg' onclick='buttonEvent()'>";
            document.querySelector(".green-wheel").innerHTML = "<img src='green-dark.svg.svg'>";
            document.querySelector(".yellow-wheel").innerHTML = "<img src='yellow-dark.svg.svg'>";

        }

        function buttonEvent() {
            if (document.querySelector(".blue-wheel")) {
                document.querySelector(".blue-wheel").innerHTML = "<img src='blue-light.svg.svg'>";
                setTimeout(setWheels, 800);
            }
            else if (document.querySelector(".red-wheel")) {
                document.querySelector(".red-wheel").innerHTML =<img src='red-light.svg.svg'>";
                setTimeout(setWheels, 800);
            }

        }

```

I havnt added the other coloured wheels as i do predict that they will have the same effect. I do believe that the setTimeout may be one of the problems as I'm calling the setWheels function but the first if statement seems to be the only one that changes colour even when i click the other div.

Answer: 
Your if statements aren't checking anything useful. `if(document.querySelector(".blue-wheel"))` is only checking if that element is there, not if the image inside was clicked.

If you want to know which image was clicked, pass it in as a parameter to the function.

```html
<img src='blue-dark.svg.svg' onclick='buttonEvent(this)'>

```

and in your javascript, just change the src for the image that was clicked and then set a timeout to change it back.

```js
function buttonEvent(e) {
    e.src = e.src.replace('dark', 'light');
    setTimeout(() => {e.src = e.src.replace('light', 'dark')}, 800);
}

```

if you want to protect against fast clicking while the image is already highlighted (improve performance) you can add a return:

```js
function buttonEvent(e) {
    if (!e.src.includes('dark')) return;
    e.src = e.src.replace('dark', 'light');
    setTimeout(() => {e.src = e.src.replace('light', 'dark')}, 800);
}

```
You are missing a "

```
.innerHTML =<img src='red-light.svg.svg'>";

```

should be

```
.innerHTML = "<img src='red-light.svg.svg'>";

```