如何制作一个按钮在两个功能之间切换？

Question

我有一个非常简单的 html 页面，带有这样的按钮：

<button id="numberonebutton" onclick="buttonClick()">Start</button>

我有单独的 .js 文件来包含 javascript 内容。我已经 google 上网好几个小时了，但找不到解决方案，但这可能是我的错，抱歉...我希望此按钮在单击时调用一个函数。它工作正常，buttonClick() 被成功调用。但是我想将这个按钮的标签从开始更改为停止（我已经可以这样做了），当它处于停止阶段时，然后调用另一个函数，而不是 buttonClick()。怎样才能做到呢？我知道我可以从按钮中读取文本并制作 if/else 东西，但这似乎是一个蹩脚的解决方法。有没有更专业的方法？我是这方面的新手...

Answer 1

使用外部事件绑定更容易做到这一点。

function buttonClick() {
    //do stuff
    this.onclick = notButtonClick; //function reference to nBC
}

function notButtonClick() {
    //do more stuff
    this.onclick = buttonClick; //function reference to original function
}

var el = document.getElementById("numberonebutton"); //let for ES6 aficionados 
el.onclick = buttonClick; //again, function reference, no ()

或者，您可以使用 addEventListener 而不是 onclick

来绑定事件

根据柠檬，here 是关于 addEventListener 和 on[event] 之间差异的一个很好的问答 :)

Answer 2

我不会那样使用内联函数；我会这样做：

<button id="numberonebutton">Start</button>

加上：

$('#numberonebutton').click(function() {
   $(this).text('Stop'); 
   //MySecondFunctionCall(); // call another function here if you please...
});

实例： http://jsfiddle.net/7doe44ke/

Answer 3

修改按钮的onclick属性为javascript:

var Foo = function(){
document.getElementById( "numberonebutton" ).setAttribute( "onClick", "javascript: Boo();" );
}

var Boo = function(){
alert("test");
}

Answer 4

处理此问题的最佳方法是通过 JavaScript 更改按钮的内容。例如：开始

function buttonClick (x) {
    if (x = 0) {
        document.getElementById('button').innerHTML = '<button id="numberonebutton" onclick="buttonClick(\'1\')">Start</button>';

        /* add what you want to do when the "Stop" button is clicked  */

    } else {
        document.getElementById('button').innerHTML = '<button id="numberonebutton" onclick="buttonClick(\'0\')">Stop</button>';

        /* add what you want to do when the "Stop" button is clicked  */

    };
}

然后，您可以通过将按钮包装在 div（称为按钮）中来实现它，如下所示：

<div id="button"><button id="numberonebutton" onclick="buttonClick('1')">Start</button></div>

这里发生的事情很简单。当您单击该按钮时，它会检查它是 Start 还是 Stop 按钮并将其更改为相反的按钮。您可以使用 css.

以任何方式设置按钮样式

如果您使用 jQuery，这也可以用更少的代码完成，但这是一种纯粹的 JavaScript 方法。

如何制作一个按钮在两个功能之间切换？

How to make a button to switch between two functions?

html

javascript

onclick

button