如何使onclick第三次执行不同的操作？

Question

我搜索了堆栈溢出问题，所有这些都只说明了onclick第二次会做些不同的事情-但我希望我的代码也第三次做不同的事情。 这是当前javascript的一部分：

function one()
{
var newButton1 = '<button id="btnTwo" onclick="two();stickAmount();" >Pick up stick</button>'; var newButton2 = '<button id="btnThree" onclick="three()">Leave it there</button>';
document.getElementById("a").innerHTML="You feel something on the ground, and you think it's a stick."+newButton1+newButton2;

var myButton = document.getElementById('btnOne');
myButton.onclick = four;
}

我的猜测是我应该在底部附近执行类似var myButton代码的操作，但是如果尝试这样做，它只会执行第三个操作，而跳过第二个操作。

Answer 1

为什么不在函数中使用静态变量？

Answer 2

您可以在按钮上附加一个计数器：

HTML：

<button id="btnOne" data-counter="0" onclick="one();" >Do It</button>

JavaScript的：

var myButton = document.getElementById('btnOne');

function one() {
    var counter=parseInt(myButton.getAttribute("data-counter"),10);
    counter++;
    myButton.setAttribute("data-counter",counter);
    // do something based on the value of counter
}

Answer 3

柜台不是我需要的-

原来我开始做正确的事，但是myButton变量不应该在同一函数中出现两次，我必须将myButton变量添加到函数4中。