JavaScript点击按钮切换显示图片功能失效，求排查问题

你的代码存在三个关键错误，导致图片切换功能失效，逐个修正即可解决：

• 图片元素缺少ID：通过document.createElement创建的img元素未设置id="img"，但imageChange函数里用document.getElementById("img")查找它，自然无法定位到目标元素。
• 事件监听传参方式错误：btn.addEventListener("click", imageChange("p2.jpg")) 这种写法会在页面加载时直接执行imageChange函数，而非点击按钮时触发。需要用匿名函数包裹，确保点击动作触发函数执行。
• 语法错误：btn.addEventListener语句末尾缺少闭合括号，会导致JavaScript解析失败。

修正后的完整代码：

// display original image
var img = document.createElement("img");
img.src = "p1.jpg";
img.width = 270;
img.height = 300;
img.id = "img"; // 给图片添加id
document.body.appendChild(img);

// add a button to change the displayed image
var btn = document.createElement('button')
btn.innerText = "change displayed image"
// 用匿名函数包裹，点击时才执行imageChange
btn.addEventListener("click", function() {
    imageChange("p2.jpg");
}); // 补上闭合括号
document.body.appendChild(btn)

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

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