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.
JavaScript
x
54
54
1
<style>2
.eventsImage{3
background-color: transparent; /* Green */4
border: 3px solid #0E489A;5
color: white;6
7
display: inline-block;8
font-size: 16px;9
margin: 4px 2px;10
cursor: pointer;11
border-radius:70px;12
height:70px;13
width:70px;14
}15
16
.connectImage{17
background-color: transparent; /* Green */18
border: 3px solid #0E489A;19
color: white;20
21
display: inline-block;22
font-size: 16px;23
margin: 4px 2px;24
cursor: pointer;25
border-radius:70px;26
height:70px;27
width:70px;28
}29
</style>30
31
32
<body>33
<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">34
35
<div id="chgtext">This is my current text</div>36
37
<input type="button" id="eventsImage" class = "eventsImage" value="" onclick="imageChange1()" onclick = "document.getElementById('chgtext').innerHTML='Change the text using javascript';">38
39
<input type="button" id="connectImage" class = "connectImage" value="" onclick="imageChange2()" onclick = "document.getElementById('chgtext').innerHTML='bla bla bla';">40
41
42
<script>43
function imageChange1()44
{45
document.getElementById("mobileImage").src="https://images.unsplash.com/photo-1590767187868-b8e9ece0974b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80";46
}47
function imageChange2()48
{49
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=";50
}51
52
</script>53
54
so I can change the images when the buttons are clicked but I cant make the text change as well.
Advertisement
Answer
This will do the job.
JavaScript
1
4
1
<input type="button" id="eventsImage" class = "eventsImage" value="" onclick="imageChange1();document.getElementById('chgtext').innerHTML='Change the text using javascript';">2
3
<input type="button" id="connectImage" class = "connectImage" value="" onclick="imageChange2();document.getElementById('chgtext').innerHTML='bla bla bla';">4