so i need a button to change an image then it is clicked but to also change a certain text. to do so I require two onclick functions. how do I do this? this is my code so far.
<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>
so I can change the images when the buttons are clicked but I cant make the text change as well.
This will do the job.
<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';">