HTML，javascript启用禁用按钮

Question

概述：我的webage上有一个Button，一个按钮。 当我单击此按钮时，它应该调用函数X。如果再次单击此按钮，则应该调用函数Y。基本上，这是一个ON和OFF开关。 此按钮通过onclick =“ function X”调用函数。 如果再次单击该onclick，则需要调用函数Y。 我希望我说清楚了。

它不能是2个单独的按钮。 那太容易了。 有人有什么想法吗？ 就语言而言，我唯一灵活的是html，javacript和CSS。 任何想法欢迎。

Answer 1

您不需要多个功能。 只需使用布尔值即可在代码的2个不同部分之间切换。

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.
}

Answer 2

有几种方法可以做到这一点：

• 两个按钮

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');
}

• 将状态保持在变量中

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
}

• 在点击时重新分配侦听器（使用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);
}

Answer 3

试试这个代码

 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>