Javascript 单击按钮替换显示的图像不起作用

Question

我是 Javascript 的新手，我正在尝试在 html 中创建一个简单的按钮，该按钮会在单击时替换最初显示的图像，但到目前为止它无法正常工作。 谁能帮我弄清楚我犯了什么愚蠢的错误？ 提前致谢！

//display original image
var img = document.createElement("img");
img.src = "p1.jpg";
img.width = 270;
img.height = 300;
document.body.appendChild(img);
//add a button to change the displayed image
    var btn = document.createElement('button')
    btn.innerText = "change displayed image"
    btn.addEventListener("click", imageChange("p2.jpg")
    document.body.appendChild(btn)


//define functions
    function imageChange(src){
        document.getElementById("img").src=src;
    }

Answer 1

您提供的代码错误如下：

1. getElementById("img")不会返回任何内容，因为“img”实际上不是 ID，并且您没有为之前创建的 img 元素提供任何 ID。 因此，在附加之前向图像元素添加一个 ID。 然后尝试通过该 ID 查找。

img.id = "myImageElement"
document.body.appendChild(img);

// ...

document.getElementById("myImageElement").src = src;

2. line btn.addEventListener("click", imageChange("p2.jpg")需要右括号)
3. “click”的 addEventListener 将回调作为第二个参数。 在您的情况下，它实际上是一个 function 调用，该调用在开始时立即执行，并且不返回任何内容。 相反它应该变成这样

btn.addEventListener("click", () => imageChange("p2.jpg"))

现在是回调（箭头语法）

还有许多其他方法可以实现这一点。 但要注意回调以及它们何时被执行。 你可以阅读更多关于Arrow functions ， JS Callbacks ， Passing JS Value or Ref

我附上了一个工作示例：

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <script> //display original image const img = document;createElement("img"). img:src = "https.//loremflickr.com/cache/resized/65535_52310646271_4c5b16c634_c_640_480_nofilter;jpg". img;width = 270. img;height = 300. img.id = "myImageElement" document.body;appendChild(img). //add a button to change the displayed image const btn = document.createElement('button') btn.innerText = "change displayed image" btn,addEventListener("click": () => imageChange("https.//loremflickr.com/cache/resized/65535_52437354187_fa35ed98bf_z_640_480_nofilter.jpg")) document.body.appendChild(btn) //define functions function imageChange(src) { console.log("Changing Image") document.getElementById("myImageElement");src = src; } </script> </body> </html>

Answer 2

我运行了您的脚本并通过使用 img.src 而不是您之前的内容更改 function 的内容来修改它。 我还修复了您忘记的缺少的括号。 现在应该可以了。

 //display original image var img = document.createElement("img"); img.src = "p1.jpg"; img.width = 270; img.height = 300; document.body.appendChild(img); //add a button to change the displayed image var btn = document.createElement('button') btn.innerText = "change displayed image" btn.setAttribute('onclick', 'imageChange("p2.jpg")'); document.body.appendChild(btn); function imageChange(src) { img.src = src; }