如何在一个按钮中实现两个 onclicks？答案

【问题标题】：how do i implement two onclicks in a button?如何在一个按钮中实现两个 onclicks？
【发布时间】：2021-06-09 12:27:33
【问题描述】：

所以我需要一个按钮来更改图像，然后单击它，但还要更改某些文本。为此，我需要两个 onclick 函数。我该怎么做呢？这是我目前的代码。

<style>
   .eventsImage{
 background-color: transparent; /* Green */
 border: 3px solid #0E489A;
 color: white;

 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
 border-radius:70px;
 height:70px;
 width:70px;
   }
   
    .connectImage{
 background-color: transparent; /* Green */
 border: 3px solid #0E489A;
 color: white;

 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
 border-radius:70px;
 height:70px;
 width:70px;
   }
</style>


<body>
<img id="mobileImage" src="https://www.nature.com/immersive/d41586-021-00095-y/assets/3TP4N718ac/2021-01-xx_jan-iom_tree-of-life_sh-1080x1440.jpeg">

<div id="chgtext">This is my current text</div>

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

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


<script>
   function imageChange1()
{
document.getElementById("mobileImage").src="https://images.unsplash.com/photo-1590767187868-b8e9ece0974b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80";
}
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=";
}

</script>

所以我可以在单击按钮时更改图像，但我也无法更改文本。

【问题讨论】：

标签： javascript html css innerhtml

【解决方案1】：

这样就可以了。

<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】：

您应该使用一个 onclick 事件来调用以分号分隔的多个函数。在 HTML 标记中内联编写 JavaScript 被认为是不好的做法。或者，您可以在一个函数中同时进行这两项更改。

function imageChange1(){
    let txt = document.querySelector("#chgtext");
    let img = document.querySelector("#mobileImage");
  img.src="https://images.unsplash.com/photo-1590767187868-b8e9ece0974b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80";
  txt.innerHTML = "Change the text using javascript"; 
}
function imageChange2(){
    let txt = document.querySelector("#chgtext");
    let img = document.querySelector("#mobileImage");
  img.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=";
  txt.innerHTML = "bla bla bla"; 
}

.eventsImage{
 background-color: transparent; /* Green */
 border: 3px solid #0E489A;
 color: white;

 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
 border-radius:70px;
 height:70px;
 width:70px;
   }
   
    .connectImage{
 background-color: transparent; /* Green */
 border: 3px solid #0E489A;
 color: white;

 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
 border-radius:70px;
 height:70px;
 width:70px;
   }

<img id="mobileImage" src="https://www.nature.com/immersive/d41586-021-00095-y/assets/3TP4N718ac/2021-01-xx_jan-iom_tree-of-life_sh-1080x1440.jpeg">

<div id="chgtext">This is my current text</div>

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

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

【讨论】：

【解决方案3】：

<style>
   .eventsImage{
 background-color: transparent; /* Green */
 border: 3px solid #0E489A;
 color: white;

 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
 border-radius:70px;
 height:70px;
 width:70px;
   }
   
    .connectImage{
 background-color: transparent; /* Green */
 border: 3px solid #0E489A;
 color: white;

 display: inline-block;
 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
 border-radius:70px;
 height:70px;
 width:70px;
   }
</style>


<body>
<img id="mobileImage" src="https://www.nature.com/immersive/d41586-021-00095-y/assets/3TP4N718ac/2021-01-xx_jan-iom_tree-of-life_sh-1080x1440.jpeg">

<div id="chgtext">This is my current text</div>

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

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


<script>
   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 1;
}
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='Change the text using javascript 2;
}

</script>

【讨论】：