我如何在一个按钮中实现两次点击？

Question

所以我需要一个按钮来更改图像然后单击它但也更改特定文本。为此，我需要两个 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>

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

Answer 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';">

Answer 2

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

Answer 3

您应该使用一个 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()">

我如何在一个按钮中实现两次点击？

how do i implement two onclicks in a button?

html

javascript

css

innerhtml