HTML, javascript Включите Disable Button

Question

Обзор: на моем веб-сайте есть кнопка, ее единственная кнопка. Когда я нажимаю эту кнопку, она должна вызывать функцию X. Если я нажму эту кнопку второй раз, она должна вызвать функцию Y. В принципе, это переключатель ВКЛ и ВЫКЛ. эта кнопка вызывает функцию через onclick = "function X". тот же onclick должен вызвать функцию Y, если снова щелкнуть. Надеюсь, я сделал это ясно.

Не может быть двух отдельных кнопок. Это слишком легко. У кого-нибудь есть идеи ? единственная гибкость, которую я имею в терминах языков, - html, javacript и css. любые идеи приветствуются.

Answer 1

Вам не нужно несколько функций. Просто используйте логическое значение для переключения между двумя разными частями кода.

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>