Question

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

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

我有单独的.js文件来包含javascript的东西。我现在谷歌网上几个小时，但找不到解决方案，但这可能是我的坏，对不起......我想要这个按钮在点击时调用一个功能。它工作正常，成功调用buttonClick（）。但我想将此按钮的标签从Start更改为Stop（我已经可以这样做），当它处于Stop阶段时，则调用另一个函数，而不是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

使用javascript：

更改按钮的onclick属性

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

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

Answer 3

处理此问题的最佳方法是通过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方法。

Answer 4

我不会使用这样的内联函数;我会这样做：

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

加：

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

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

如何使按钮在两个功能之间切换？

4 个答案: