javascript две кнопки меняют друг друга, используя одну функцию

Question

У меня есть следующий код, чтобы изменить значение внутри одной кнопки, нажав другую и наоборот. Здесь я использовал две функции и две переменные ... я хочу использовать одну функцию и одну переменную.

 i=1; 
 
\t \t j=1; 
 
\t \t function changeSecond(){ 
 
\t \t \t if(i==1){ 
 
\t \t \t \t document.getElementById('second').innerHTML='second changed'; 
 
\t \t \t \t i++; 
 
\t \t \t }else{ 
 
\t \t \t \t \t document.getElementById('second').innerHTML='Second Button'; 
 
\t \t \t \t \t i--; 
 
\t \t \t \t } 
 
\t \t } 
 
\t \t function changeFirst(){ 
 
\t \t \t if(j==1){// use 'i' here instead j ... 
 
\t \t \t \t document.getElementById('first').innerHTML='First changed'; 
 
\t \t \t \t j++; 
 
\t \t \t }else{ 
 
\t \t \t \t \t document.getElementById('first').innerHTML='First Button'; 
 
\t \t \t \t \t j--; 
 
\t \t \t \t } 
 
\t \t }

<button onclick="changeSecond();" id="first">First Button</button> 
 
<button onclick="changeFirst();" id="second">Second Button</button>

Answer 1

Вы можете сделать это с помощью одной функции и не переменной, как

function changeme(id) { 
 
    var other = document.getElementById(id == 'first' ? 'second' : 'first'); 
 
    if (/changed/i.test(other.innerHTML)) { 
 
    other.innerHTML = other.innerHTML.replace('Changed', 'Button'); 
 
    } else { 
 
    other.innerHTML = other.innerHTML.replace('Button', 'Changed'); 
 
    } 
 
}

<button onclick="changeme(this.id);" id="first">First Button</button> 
 
<button onclick="changeme(this.id);" id="second">Second Button</button>

---

Если вы хотите сохранить состояние в переменная, то

var value = 0; 
 

 
function changeme(id) { 
 
    var other = document.getElementById(id == 'first' ? 'second' : 'first'), 
 
    val = id == 'first' ? 1 : 2; 
 

 
    if (value & val) { 
 
    other.innerHTML = other.innerHTML.replace('Changed', 'Button'); 
 
    value ^= val; 
 
    } else { 
 
    other.innerHTML = other.innerHTML.replace('Button', 'Changed'); 
 
    value |= val; 
 
    } 
 
}

<button onclick="changeme(this.id);" id="first">First Button</button> 
 
<button onclick="changeme(this.id);" id="second">Second Button</button>