Javascript/html 中的多个 onclick 事件答案

【问题标题】：Multiple onclick events in Javascript/htmlJavascript/html 中的多个 onclick 事件
【发布时间】：2023-03-28 01:30:01
【问题描述】：

如何为我的 html 按钮创建多个 onclick 事件？我现在的代码只为一个按钮实现它。单击其他按钮时，如何获取脚本以将图像 src 更改为不同的图像。我尝试为每个按钮使用不同的功能，但没有奏效。

<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>

【问题讨论】：

给你的按钮一个类并使用getElementsByClassName();选择它们。 ID 应该是唯一的，因此您提供的代码仅与一个特定按钮相关。
“我尝试为每个按钮使用不同的功能，但没有奏效”.. 应该。任何方式尝试使用参数调用相同的函数。例如：myFunction('Objectives');
尝试发布您为每个按钮尝试不同功能的代码，然后您可以获得调试帮助。
谢谢@Daniel Shillcock，@ leonsaysHi 我尝试了两种方法，它们确实有效。

标签： javascript html onclick

【解决方案1】：

您应该将参数传递给函数，如下所示：

<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>

【讨论】：