如何将这两个按钮功能合并为一个，例如开/关开关答案

【问题标题】：How do I merge these two button functions into one, like an on/off switch如何将这两个按钮功能合并为一个，例如开/关开关
【发布时间】：2015-04-17 13:18:17
【问题描述】：

如何将这两个按钮功能合并为一个，以便按钮从 isRunning=true 切换到 isRunning=false，然后再返回等等？ "isRunning" 是页面上 javascript 函数中的一个变量。

我还想将标准按钮替换为我自己设计的图像按钮（简单的 .jpg 文件）。任何人都可以帮忙吗？请看下面的代码：

<button onclick="isRunning = false">hold</button>
<button onclick="isRunning = true">continue</button>

【问题讨论】：

标签： javascript function button toggle var

【解决方案1】：

你去吧：

<button onclick="isRunning = !isRunning; this.innerHTML = (isRunning) ? 'hold' : 'continue'">hold</button>

对于您的图像尝试：

<img src="hold.jpg" onclick="isRunning = !isRunning; this.src = (isRunning) ? 'hold.jpg' : 'continue.jpg'" />

【讨论】：

非常简洁。
是的。但是文本也需要从“保持”变为“继续”，然后在您单击时再次返回。
不，按钮内的文字说“点击我”，而不是在您点击时从按住切换到继续并再次返回。
已修复，现在可以使用（已测试）。我使用了 innerHtml 而不是 innerHTML
是的最佳答案 3.

【解决方案2】：

<button onclick="toggleButton(this)">Toggel Me</button>

然后

function toggleButton(element) {
    if(isRunning == false) {
        element.innerHTML = "TRUE";
        isRunning = true;
    } else {
        element.innerHTML = "FALSE";
        isRunning = false;
    }
}

【讨论】：

【解决方案3】：

甚至更小：

<button onclick="toggleButton()">hold</button>

JS：

function toggleButton() {
    isRunning = !isRunning;
}

尽管您应该考虑不使用“onclick”，而是按照this MDN article 中的建议注册适当的事件处理程序。它允许您将代码与 HTML 分开，使其更易于维护和阅读。尤其是当它不仅仅是一行代码时。

【讨论】：

如果您使用的是 JQuery，您的陈述将是正确的，因为正如答案所示，“jQuery 内部使用 addEventListener 和 attachEvent”，而您使用的是 vanilla javascript，除非您指示，否则不应使用此类方法它到。
不确定“除非您指示它”是什么意思，但我将链接更改为指向 SO 答案中提到的 MDN 文章，因为它不是特定于 jQuery 的
指示您的函数使用 addEventListener 和 attachEvent。这似乎是您链接的文章所指示的内容。