如何为button按钮绑定两个onclick事件实现点击同时改图和改文本

问题原因 #

你当前代码失效的核心原因是：HTML 中同一个 DOM 元素不允许声明多个相同的事件属性，你写的第二个onclick属性会直接覆盖第一个，所以只有第一个绑定的换图逻辑能生效，修改文本的逻辑不会执行。

解决方案1：直接合并onclick事件内容 #

直接把两个操作放在同一个onclick属性里，用分号分隔即可，修改你的按钮代码如下：

<input type="button" id="eventsImage" class = "eventsImage" value="" onclick="imageChange1();document.getElementById('chgtext').innerHTML='Change the text using javascript';">

<input type="button" id="connectImage" class = "connectImage" value="" onclick="imageChange2();document.getElementById('chgtext').innerHTML='bla bla bla';">

解决方案2：把文本修改逻辑合并到对应函数中（更推荐，可维护性更高） #

直接修改你已经写好的imageChange1和imageChange2函数，把修改文本的逻辑放到函数内部，按钮只需要绑定一个函数即可：

修改后的JS代码： #

function imageChange1()
{
  document.getElementById("mobileImage").src="https://images.unsplash.com/photo-1590767187868-b8e9ece0974b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80";
  // 新增修改文本的逻辑
  document.getElementById('chgtext').innerHTML='Change the text using javascript';
}
function imageChange2()
{
  document.getElementById("mobileImage").src="https://media.istockphoto.com/photos/child-hands-formig-heart-shape-picture-id951945718?k=6&m=951945718&s=612x612&w=0&h=ih-N7RytxrTfhDyvyTQCA5q5xKoJToKSYgdsJ_mHrv0=";
  // 新增修改文本的逻辑
  document.getElementById('chgtext').innerHTML='bla bla bla';
}

修改后的按钮代码（只保留一个onclick即可）： #

<input type="button" id="eventsImage" class = "eventsImage" value="" onclick="imageChange1()">

<input type="button" id="connectImage" class = "connectImage" value="" onclick="imageChange2()">

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