如何在一个按钮中实现两个 onclicks？
[英]how do i implement two onclicks in a button?
问题描述
所以我需要一个按钮来更改图像，然后单击它，但也要更改某些文本。 为此，我需要两个 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>
所以我可以在单击按钮时更改图像，但我也无法更改文本。
3 个解决方案
解决方案1
2 已采纳 2021-06-09 12:31:18
这将完成这项工作。
<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
2 2021-06-09 12:36:19
您应该使用一个调用由分号分隔的多个函数的onclick事件。 在 HTML 标签中内联写入 JavaScript 被认为是不好的做法。 或者，您可以在一个 function 中进行这两项更改。
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
1 2021-06-09 12:32:07
<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>
如何在Javascript / HTML计算表单上实现“提交”按钮？
[英]How do I implement a “Submit” button on a Javascript/HTML calculation form?
如何实现一个按钮，检查文档中的字段是否为空？ JavaScript
[英]How do I implement a button, that checks if the fields in a document are not empty? JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.