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

Question

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

我也想将标准按钮替换为我自己设计的图像按钮（简单的.jpg 文件）。谁能帮忙？请看下面的代码：

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

Answer 1

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

然后

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

Answer 2

好了：

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

Answer 3

甚至更小：

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

JS:

function toggleButton() {
    isRunning = !isRunning;
}

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

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

How do I merge these two button functions into one, like an on/off switch

javascript

function

button

toggle

var