Javascript 使用javasript和html更改图像的状态

请允许我在下面获取有关javaScript代码和html的帮助，我正在尝试使用javaScript更改灯泡的状态，这样当我单击打开按钮时，灯泡将变为黄色，当我单击关闭按钮时，灯泡将变为白色，我实际上不知道我做错了什么

function turnOn() {
      let changeState = document.querySelector('.img');
      changeState.src = "lightbulb.png";
      changeState.style.color = "yellow";
}

function turnOff() {
    let turnOff = document.querySelector('.img');
     turnOff.src = "lightbulb.png";
     turnOff.style.color = 'white';
}


<button class="turn-on" onclick="turnOn();">Turn On</button>
<img  src="lightbulb.png" alt="" width="200" class="img">
<button class="turn-off" onclick="turnOff();">Turn Off</button>

功能开启（）{
让changeState=document.querySelector（'.img'）；
changeState.src=“lightbulb.png”；
changeState.style.color=“黄色”；
}
功能关闭（）{
让关闭=document.querySelector（'.img'）；
turoff.src=“lightbulb.png”；
关闭.style.color='白色'；
}
打开
关掉

您不能使用

style.color

更改图像中灯泡的颜色

创建两个单独的图像-一个用于“打开”，一个用于“关闭”，然后修改

changeState.src

行以指向正确的文件

您可以删除

style.color

行

这应该行得通

---

PS：如果图像保存为图像，您可以通过编程更改图像的状态，但这通常比创建两个图像更复杂。

另一个选项是在图像上使用CSS过滤器，并在IMG元素上交换一个类。