Javascript JS风格的变化不'；内部请求时无法应用

我想使网站上的图像在同一个域中找不到某个文件时，禁用其“onclick”事件并应用灰色过滤器。我想使用纯JS，到目前为止已经尝试过：

function fileNonExist(url, callback){
        var http = new XMLHttpRequest();
        http.onreadystatechange = function() {
                if (http.readyState === XMLHttpRequest.DONE && callback) {
                        if(http.status != 200){
                                callback();
                        }
                }

        }
        http.open('HEAD', url);
        http.send();
}

fileNonExist("theFileIAmLookingFor.html", () => {
        console.log("image changed");
        image.onclick = "";
        image.style.filter = "grayscale(100%)";
});

我已初始化并显示图像。因此

image.onclick=”“

和

image.style.filter=“灰度（100%）

---

但是，即使功能块按预期执行（如果找不到文件，控制台会记录“图像更改”，否则不会记录任何内容）如果从这些块中执行样式更改，则任何样式更改都不可见。为什么会这样？我如何修复它？

在与Emiel Zurbier交谈时，我自己找到了解决方案：我注意到，如果我在浏览器中正常打开html文件，代码就会工作。如果我通过Web服务器访问该文件，则会出现错误，我已经安装了Web服务器整个过程都完成了。如果在浏览器中打开站点时关闭服务器，则更改也会应用。如果在浏览器中使用开发工具查看请求，我会发现只有成功的请求才会完成，而未成功的请求将永远挂起。这就是为什么在服务器关闭时应用更改的原因关闭时，所有挂起的请求都会被错误关闭。服务器使用Node.js“fs”模块及其readFile方法

---

现在，我将尝试改变样式，使所有图像从灰色开始，而不使用“onclick”“-方法，并且仅在找到文件后才解除锁定。这样，具有挂起请求的图像将保持灰色。

哪里定义了

image

？

image

在主体中定义为

，之后在脚本中定义为

var image=document.getElementById（“图像”）很难说。您的代码看起来很好，您甚至解释了日志消息的显示。您是否能够创建一个片段或环境，让我们可以体验您正在经历的bug？我将尝试将一些东西组合起来。我还注意到，如果我在浏览器中正常打开html文件，代码就会工作。如果我通过Web服务器访问该文件，就会出现错误，我一直都在这样做。如果在网站仍在浏览器中打开时关闭服务器，则更改也会应用。因此，我认为问题在于服务器的工作方式，而不是html文件。如果我在浏览器中使用dev工具查看请求。我看到只有成功的请求才会完成，而未成功的请求则会永远挂起。这就是为什么在服务器关闭并且所有挂起的请求关闭时都会出现错误时应用更改的原因。服务器使用Node.js“fs”模块及其readFile方法。我现在将尝试改变样式，使所有图像从灰色开始，没有“onclick”方法，并且只有在找到文件后才解锁。这样，具有挂起请求的图像将保持灰色。