按钮 onclick 的奇怪行为答案

【问题标题】：Strange behavior of button onclick按钮 onclick 的奇怪行为
【发布时间】：2020-05-12 00:15:34
【问题描述】：

我目前正在处理一个项目，但我的导航栏有些问题。

我在下拉菜单中有两个按钮：

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
   <button class="dropdown-item all" id = "my_all" onclick = "showApplied()">Angemeldet</button>
   <button class="dropdown-item off" id = "empty" onclick = "switchShowAllEmpty()">Leere Aktivitäten einblenden</button>
</div>

第二个按钮工作正常，但是当我单击第一个按钮时，没有任何反应。当我更改结束按钮“empty”时仍然有效，而按钮“my_all”没有。但是，当我通过复制第一个按钮并再次将其粘贴到下拉菜单中来操作浏览器内的副本时，尽管原始按钮没有，但粘贴的按钮仍然有效。

对我来说这毫无意义。而且 onclick 功能也可以正常工作，所以这不是问题。如果有人知道问题出在哪里，请告诉我。

【问题讨论】：

请在minimal reproducible example 中包含相关代码。您可以使用Stack Snippets（图标在编辑器工具栏中看起来像<>）在此处生成一个可运行的示例。
问题是，如果我们不能用发布的代码重现问题，那么在您修复页面后，这个问题对未来的读者来说毫无用处。这就是为什么我们需要这里的代码。
正如我之前的评论：问题是，当我将代码放在其他地方时，就像在 jsfiddle 中一样。我看不到问题的另一个原因。
听起来您还没有确定minimal reproducible example 的最小部分。继续从您的项目中添加更多代码，直到您开始看到问题再次出现。这就是调试的本质。删除东西直到问题停止发生，然后一次重新添加一个东西，直到你看到它回来；那么你就知道是什么导致了这个问题。您可能需要在很长一段时间内使用越来越小的代码块来做到这一点。有时令人沮丧，尤其是当你让人们在你的脖子上呼吸时，但这就是工作。

标签： javascript html button

【解决方案1】：

代码中的问题在于 showAll() 函数内的第 143 行。

function showAll(){
        document.getElementById("my_all").onclick = "showApplied()";

您正在尝试为 onclick 属性而不是函数定义提供字符串值（即函数文本）。您可以删除它，因为无论如何您已将 onclick 事件应用于 HTML 中的按钮。

无论如何，如果你真的想要它，那么，

你可以试试document.getElementById("my_all").onclick = showApplied

您可以参考 onclick 属性文档here。您也可以尝试查看工作示例here。

【讨论】：

哦，哇，你的权利。我从没想过会是这个问题，非常感谢！