首次单击后更改按钮onclick

Question

I'm having some struggles getting this to work. I have a button, and I want it to execute Javascript function A, and in that function A, i want to change the Onclick to function B. Thus getting as result when the user taps the button a SECOND time, it's executing B. With the

<Button onclick="A();">Click me</button>
<script>
Function A() {
document.getElementById("button").onclick=B();
}
Function B() {
Alert("hello world");
}

In function A(), it doesn't execute FIRST A and after that B, it instantly executes B. Could anyone help me? Thanks :)

Answer 1

You're calling B with B() .

Use document.getElementById("button").onclick=B; . Note that there's no parentheses after B .

Answer 2

When you write a function name with the parenthesis, like B() , that invokes the function immediately. Instead, you'll want to set onclick to be just the name of the function, A or B .

Your overall solution could look something like this:

function A(event) {
  // Function logic...
  event.target.onclick = B;
}

function B() {
  // Function logic...
}

document.getElementById("button").onclick = A;

Answer 3

You can use Jquery to change any attribute of a button onclick. Below, I update the onclick attribute to instead execute function B()

 function A() { $('#toggler').attr('onclick', 'B()'); } function B() { console.log('Updated to B()!'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="toggler" onclick="A()">Click me!</button> 

Answer 4

Use an id instead of the onclick for the button then target it from javascript like this:

 function b() { console.log('I am in B.') } function a() { console.log('I am inside A.'); button1.removeEventListener('click', a); button1.addEventListener('click', b); } var button1 = document.getElementById('button1'); // get the button element button1.addEventListener('click',a); // assigns a click listener to a() at the beginning 

 <Button id="button1">Click me</button>