Javascript addEventListener“点击”问题。单击仅有效一次

Question

我希望每次点击图片时图像都会改变。但更改img的点击仅有效一次。我做错了什么？ 随机图像选择器来自此网站：https://picsum.photos/，每次我单击该链接时都会出现一个新的图像。

const img = document.createElement("img");

img.src = "https://cdn.pixabay.com/photo/2024/02/05/03/10/sun-8553511_1280.jpg";
img.style.width = "300px";

body.appendChild(img);

    img.addEventListener("click", function() {
        img.src = "https://picsum.photos/200/300";
    });

Answer 1

看来后续对

https://picsum.photos/200/300

的请求确实会返回随机图像。 然而，代码并没有告诉浏览器发出这些请求，因为代码并没有技术上将

src

值更新为任何新值。

如果您将随机值附加到查询字符串，那么它将成为一个新的 URL，并且浏览器会发出新的请求。 例如：

const body = document.querySelector('body');
const img = document.createElement("img");

img.src = "https://cdn.pixabay.com/photo/2024/02/05/03/10/sun-8553511_1280.jpg";
img.style.width = "300px";

body.appendChild(img);

img.addEventListener("click", function() {
  img.src = "https://picsum.photos/200/300?" + Math.random();
});

Answer 2

代码中的问题是，当单击图像时，您将 src 属性设置为静态 URL。此 URL 在后续点击中不会更改，这就是图像仅更改一次的原因。如果我们在 url 中添加一个随机字符串，它就能正常工作。

const img = document.createElement("img");

img.src = "https://cdn.pixabay.com/photo/2024/02/05/03/10/sun-8553511_1280.jpg";
img.style.width = "300px";

document.body.appendChild(img);

img.addEventListener("click", function() {
    // Add a random parameter to force a new image on each click
    img.src = "https://picsum.photos/200/300?" + Math.random();
});