Question

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

此外，我想将标准按钮替换为我自己设计的图像按钮（简单的.jpg文件）。有人可以帮忙吗？请参阅以下代码：

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

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

Answer 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;
    }
}

Answer 3

甚至更小：

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

JS：

function toggleButton() {
    isRunning = !isRunning;
}

虽然您应该考虑不使用＆＃34; onclick＆＃34;而是按this MDN article中的建议注册正确的事件处理程序。它允许您将代码与HTML分开，使其更易于维护和阅读。特别是当它不仅仅是一行代码时。

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

3 个答案: