HTML, javascript Enable Disable Button

Question

Overview: There is a Button on my webage, its a single button. When I click this button, it should call function X. If I click this button a second time, it should call function Y. Basically, this is an ON and OFF switch. this button calls a function via onclick="function X". the same onclick needs to call function Y if clicked again. I hope I made that clear.

It cannot be 2 seperate buttons. thats too easy. does anyone have any ideas ? the only flexibily I have in terms of languages is html, javacript and css. any ideas welcome.

Keep a Boolean flag and set it to true/false based on the current value of flag and based on the value you can write your functionality using if/else. — Mo Hasan
– Mo Hasan, Commented Apr 20, 2016 at 9:04

Cerbrus · Accepted Answer · 2016-04-20 09:01:49Z

1

You don't need multiple functions. Just use a boolean to toggle between 2 different parts of code.

var toggle = true;
function functionX(){
    if(toggle){
        // Logic for the first click
    } else {
        // Logic for the other click
    }
    toggle = !toggle; // change the toggle for the next time the button's clicked.
}

answered Apr 20, 2016 at 9:01

Cerbrus

73.3k19 gold badges138 silver badges151 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rhys Bradbury Over a year ago

Agreed but you may want to separate out to two functions for SOC purposes

Rhys Bradbury · Accepted Answer · 2016-04-20 13:53:45Z

There are a few ways to do this:

Two Buttons

html

<button id="a" onclick="a()">Test</button>
<button id="b" onclick="b()" style="hidden">Test</button>

css

.hidden {
  display: none;
}

js

function a() {
  var buttonA = document.getElementById('a');
  var buttonB = document.getElementById('b');
  buttonA.classList.add('hidden');
  buttonB.classList.remove('hidden');
}

function b() {
  var buttonA = document.getElementById('a');
  var buttonB = document.getElementById('b');
  buttonB.classList.add('hidden');
  buttonA.classList.remove('hidden');
}

Hold State in a var

html

<button onclick="x()">Test</button>

js

var clicked = 'b'; //initial state

function x() {
  switch(clicked) {
    case 'a':
      clicked = 'a';
      a();
    break;
    case 'b':
      clicked = 'b';
      b();
    break;
    default: throw 'unknown state';
  }
}

function a() {
  //something
}
function b() {
  //something
}

Re-assign listener on click (Easier with jquery)

html

<button id="x">Test</button>

js

$(document).ready(function() {
  $('#x').click(a());
});

function a() {
  //do something then..
  $('#x').click(b);
}

function b() {
  //do something then..
  $('#x').click(a);
}

Bhargav Chudasama · Accepted Answer · 2017-08-04 11:28:11Z

0

try this code

var i = 0;

function fun() {

  if (i == 0) {
    funX();
    i = 1;
  } else {
    funY();
    i = 0;
  }

}

function funX() {
  console.log('x');
}

function funY() {
  console.log('y');
}

<button id="test" onclick="fun()">Click</button>

answered Aug 4, 2017 at 11:28

Bhargav Chudasama

7,2256 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

HTML, javascript Enable Disable Button

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related