onclick事件异常：点击模态框按钮无法切换图片源求助

我一眼就发现问题啦——你按钮的onclick事件里的JavaScript代码存在语法错误！

错误原因 #

你写的代码中，获取到图片元素后直接写了src，但正确的写法需要用点操作符来访问元素的src属性（也就是.src）。少了这个关键的点，浏览器无法识别这是要修改元素属性，自然就不会有任何反应。

修复后的按钮代码 #

把两个按钮的onclick代码改成下面这样即可：

<button onclick="document.getElementById('myImg').src='/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg'">Image 1</button>
<button onclick="document.getElementById('myImg').src='/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg'">Image 2</button>

额外优化建议（可选） #

如果想让代码更清晰、后期维护更方便，可以把图片切换逻辑抽成单独的函数：

function switchImage(imgUrl) {
  document.getElementById('myImg').src = imgUrl;
}

然后按钮调用这个函数：

<button onclick="switchImage('/CMS_Static/Uploads/313864614C6F6F/DJI_0019-Recovered.jpg')">Image 1</button>
<button onclick="switchImage('/CMS_Static/Uploads/313864614C6F6F/DJI_0073-Recovered.jpg')">Image 2</button>

这样后续要调整切换逻辑或者新增更多图片选项时，操作起来会轻松很多~

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