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

时间:2017-03-21 15:00:59

标签: javascript html css function

我正在尝试编辑一些代码,以便在有人按下按钮时执行某个功能。例如,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">

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

1 个答案:

答案 0 :(得分:0)

您的代码存在一些问题:

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

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

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

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