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

如何将这两个按钮功能合并为一个，以便按钮将从isRunning=true切换到isRunning=false，再切换回来，依此类推？“isRunning”是页面上javascript函数中的一个变量

我还想将标准按钮替换为我自己设计的图像按钮（simple.jpg文件）。有人能帮忙吗？请参阅下面的代码：

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

保持
持续

好了：

<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'" />

甚至更小：

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

---

不过，您应该考虑不使用“OnCalk”，而应注册一个适当的事件处理程序，如建议的那样。它允许您将代码与HTML分开，从而使维护和阅读更容易。特别是当它不仅仅是一行代码时。

非常漂亮和简洁。是的。但是文本也需要从“保持”更改为“继续”，然后在单击时再次返回。不，按钮内的文本显示为“单击我”，而不是在单击时从保持切换为继续再返回。已修复，现在可以工作（已测试）。我使用的是innerHtml而不是innerHTMLYep，这是3中最好的答案。如果你使用JQuery，你的陈述将是正确的，因为正如答案所示，“JQuery在内部使用addEventListener和attachEvent”，而如果你使用的是香草javascript，除非你指示它，否则不应该使用这种方法。不确定你的意思是什么“除非您指示它”，但我将链接改为指向SO答案中提到的MDN文章，因为它不是jQuery Specificated，它是您的函数，使用addEventListener和attachEvent。这似乎是您链接的文章所指示的方法。

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

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

function toggleButton() {
    isRunning = !isRunning;
}