Javascript OnClick按钮功能无法正常工作

Question

我正在尝试编辑一些代码，以便在有人按下按钮时执行某个功能。例如，https://jsfiddle.net/h0eks0vq/12/

/* Get the button, and when the user clicks on it, execute myFunction */
document.getElementById("buttons-services").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

<div id="buttons-services">
<button onclick="myFunction()" id="myButton10" title="Cliquez pour une description du service offert" >Assemblage</button>
<div id="myDropdown" class="dropdown-content">
<p id="demo">

我遇到的问题是，尽管对于不同的按钮有不同的文本，但是在执行该功能时显示的文本总是相同的。

Answer 1

您的代码存在一些问题：

• 您为多个元素分配了相同的ID
• 您在定义事件之前已将该功能分配给该事件
• 您在两个地方分配了事件处理程序，即onclick属性和addEventListener函数

等小错误。我为你修好了一些：

https://jsfiddle.net/h0eks0vq/18/

除其他事项外，您会注意到我使用类来标识多个元素，并且我引入了一个属性来指示应该出现哪个弹出窗口（由ID唯一标识）。请注意，属性名称必须以data-开头。