Multiple onclick events in Javascript/html

Question

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 different images when the other buttons are clicked. I tried using different functions for each button but that didn't work.

*

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

*

Give your buttons a class and select them using getElementsByClassName();. Ids should be unqiue, so the code you provided only relates to one specific button. — IronAces
– IronAces, Commented Dec 12, 2016 at 15:39
"I tried using different functions for each button but that didn't work" .. it should. Any way try calling the same function with an argument instead. ex: myFunction('Objectives'); — leonsaysHi
– leonsaysHi, Commented Dec 12, 2016 at 15:41
Try posting the code where you tried different functions for each button, then you can get help debugging that. — Dark Hippo
– Dark Hippo, Commented Dec 12, 2016 at 15:43
Thanks @Daniel Shillcock , @ leonsaysHi I tried it out both ways and they do work. — user3049674
– user3049674, Commented Dec 12, 2016 at 16:34

Piotr Białek · Accepted Answer · 2016-12-12 15:43:43Z

2

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>

answered Dec 12, 2016 at 15:43

Piotr Białek

2,7571 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple onclick events in Javascript/html

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related