点击图片指定区域切换两张图片功能异常，如何修复？

问题出在你只给lights-on图片绑定了点击事件——当切换到lights-off图片显示后，点击它的指定区域时没有对应的事件处理逻辑，自然无法切回原图片。

直接给两张图片都绑定同一个切换逻辑就能解决，修改后的代码如下：

<img id="lights-off" src="../images/ABC2.png" style="display: none;">
<img id="lights-on" src="../images/ABC.png">

<script>
const lightsOff = document.getElementById("lights-off");
const lightsOn = document.getElementById("lights-on");
let isChanged = false;

// 提取共用的切换逻辑
function toggleLights(event) {
    // 校验点击区域是否符合要求
    if (event.offsetX >= 0 && event.offsetX <= 100 && event.offsetY >= 0 && event.offsetY <= 20) {
        if(!isChanged){
            lightsOff.style.display = "block";
            lightsOn.style.display = "none";
            isChanged = true;
        } else {
            lightsOff.style.display = "none";
            lightsOn.style.display = "block";
            isChanged = false;
        }
    }
}

// 给两张图片都绑定点击事件
lightsOn.addEventListener("click", toggleLights);
lightsOff.addEventListener("click", toggleLights);
</script>

这样不管当前显示的是哪张图片，只要点击它的指定区域，都会触发切换逻辑，通过isChanged变量统一控制显示状态，就能实现来回切换了。

内容的提问来源于stack exchange，提问作者andre