Javascript 更改按钮和 onClick 问题

Question

我正在尝试在 JavaScript 中使用 onClick 事件，但遇到了问题。我想制作一个按钮，在单击时来回更改其 id、单击处理程序和文本 - 我希望它在第一次单击时成为一个完全不同的按钮，但在单击时恢复到原始按钮第二次。

我的想法是为被单击的原始按钮编写一个事件处理程序，将其更改为第二个按钮，并将其放入函数“change()”中。我还计划为单击的新按钮编写一个单独的事件处理程序，将其更改为原始按钮，并将其放入函数“changeBack()”中。

问题是，当我单击原始按钮一次时，change() 会被调用，并且在其中，changeBack() 自动 会在为新按钮定义 onClick 时被调用，并且正确在innerHTML 改变之前。我注释掉了一些原始行，并添加了一个警报来说明这种不需要的行为。我认为在创建新按钮时，单击仍然处于事件状态，从而强制它调用changeBack()，即使新按钮从未被单击过。对此的任何帮助都会很棒。谢谢。

<script type="text/javascript">
    function change() {
        var x = document.getElementById("button");
        x.id = "alternateButton";
        x.onClick = changeBack();
        x.innerHTML = "Click to Change Me Back";
    }

    function changeBack() {
        var x = document.getElementById("alternateButton");
        alert('hi');
        //x.id = "button";
        //x.onClick = change();
        //x.innerHTML = "Click Me";
    }   
</script>

<button id="button" onClick="change()">Click Me</button>

Answer 1

事件绑定(bind)到元素而不是 ID 属性。当您单击按钮时，这两个处理程序始终都会执行。

避免使用内联事件处理程序绑定(bind)处理程序也是一个好主意。

// Find the elemnt
var btn = document.getElementById('button');
// Data attribuet to keep tab of whether it is clicked or not
btn.dataset.clicked = "1";
// Attach event
btn.addEventListener('click', change);

function change() {
    var txt = 'Click to Change Me Back';
    // Will give you the truthy/falsy value
    if(!!this.dataset.clicked) {
        this.dataset.clicked = "";

       // First implementation

    } else {
        this.dataset.clicked = "1";
        txt = "Click Me";

        // The other case
    }
    this.innerHTML = txt;
}

<强> Check Fiddle