Skip to content Skip to sidebar Skip to footer

Multiple Onclick Events In Javascript/html

How can I create multiple onclick events for my html buttons? The code I have right now only implements it for one button. How can I get the script to change the image src to diffe

Solution 1:

You should pass parameter to the function, something like this:

<body>
<button class="button" onclick="myFunction('Objectives')" ><strong>Objectives</strong></button>
<button class="button" onclick="myFunction('Mission')"><strong>Mission</button></strong>
<button class="button" onclick="myFunction('Chemistry)"><strong>Chemistry Vision</strong></button>
<button class="button" onclick="myFunction('Environment')"><strong>Environment Vision</strong></button></br>
<img id="myImg" src="http://image.png" >
<script>
function myFunction(imgName) {
    document.getElementById("myImg").src = "http:" + imgName + ".png"; 
}
</script>
</body>

Post a Comment for "Multiple Onclick Events In Javascript/html"