内部请求时不会应用 JS 样式更改答案

【问题标题】：JS style-changes don't get applied when inside request内部请求时不会应用 JS 样式更改
【发布时间】：2020-12-14 21:52:19
【问题描述】：

如果在同一个域中找不到某个文件，我想让网站上的图像禁用其“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 = "grayscale(100%) 如果它们正常使用，两者都可以工作。但是，即使功能块按预期执行（如果找不到文件，控制台会记录“图像已更改”，否则不会显示任何内容。）如果从这些块中执行样式更改，则它们都不可见。为什么会这样？我该如何解决？

【问题讨论】：

image 定义在哪里？
image 在正文中定义为 <img src="image.png" alt="image not found" onclick= "onclickImage()" id="image">，稍后在脚本中定义为 var image = document.getElementById("image");
很难说。您的代码看起来不错，您甚至解释说显示了日志消息。您是否能够创建一个我们可以体验您遇到的错误的 sn-p 或环境？
我会尝试把一些东西放在一起。我还注意到，如果我在浏览器中正常打开 html 文件，代码就可以工作。如果我通过网络服务器访问文件，则会出现错误，我一直在这样做。如果我在网站仍在浏览器中打开时关闭服务器，那么更改也会应用。因此，我认为问题在于服务器的工作方式，而不是 html 文件。
我想我已经确定了问题所在。如果我在浏览器中使用开发工具查看请求。我看到只有成功的请求才能完成，不成功的请求会永远挂起。这就是为什么当服务器关闭并且所有挂起的请求都因错误而关闭时应用更改的原因。服务器使用 Node.js 的“fs”模块及其 readFile 方法。我现在将尝试改变样式，使所有图像从灰色开始，并且没有“onclick”方法，并且只有在找到文件后才会解锁。这样，带有待处理请求的图像将保持灰色。

标签： javascript node.js image xmlhttprequest fs

【解决方案1】：

在与 Emiel Zuurbier 交谈时，我自己找到了解决方案：我注意到，如果我在浏览器中正常打开 html 文件，代码就可以工作。如果我通过网络服务器访问文件，则会出现错误，我一直在这样做。如果我在网站仍在浏览器中打开时关闭了服务器，那么更改也会应用。如果我在浏览器中使用开发工具查看请求。我看到只有成功的请求才能完成，不成功的请求会永远挂起。这就是为什么当服务器关闭并且所有挂起的请求都因错误而关闭时应用更改的原因。服务器使用 Node.js 的“fs”模块及其 readFile 方法。

我现在将尝试改变样式，使所有图像从灰色开始，并且没有“onclick”-方法，并且只有在找到文件后才会解锁。这样，具有待处理请求的图像将保持灰色。

【讨论】：