トグル機能を発動する1つのボタン？ボタン - > toggleOn（）を押して、もう一度押す - > toggleOff（）、再度押す - > toggleOn（）

Question

ボタンで同じonClickを使用することはできますか？

私はボタン<button>Toggle</button>を持っていて、基本的にそれをトグルするには、toggleOn()またはtoggleOff()のいずれかを実行する必要があります。

onClickプロパティでこれを行うにはどうすればよいですか？

Answer 1

ボタンが「オン」または「オフ」のどちらかの状態を維持する必要があります。

function toggler(fn1, fn2) { 
    var toggled = true; 
    return function() { 
    toggled = !toggled; 
    return (toggled ? fn1 : fn2).apply(this, arguments); 
    } 
} 

function logToConsole (e) { 
    console.log(this, e); 
} 

function logToAlert (e) { 
    alert(e); 
} 

var toggledLog = toggler(logToConsole, logToAlert); 

は今の引数でtoggledLogを実行している：ここで

Answer 2

const setText = (text) =>() => { 
 
    document.getElementById('toggled').innerHTML = text; 
 
}; 
 

 
const toggleOff = setText('off'); 
 
const toggleOn = setText('on'); 
 

 
const makeClickhandler =() => { 
 
     let buttonState = false; 
 
     return() => { 
 
      buttonState ? toggleOff() : toggleOn(); 
 
      buttonState = !buttonState; 
 
     } 
 
    }; 
 
    
 
document.getElementById('yourbuttonid').addEventListener('click', makeClickhandler());

<button id='yourbuttonid'>Toggle</button> 
 
<span id='toggled'>off</span>

がシンプルである高階関数「トグラー」：私は buttonState変数の上にクロージャを作成することによってこれを行うだろうコンテキストが適切に機能します。 onClickハンドラで使用できます。

Answer 3

私はそれを達成するためのさまざまな方法を想像することができます。

var button = document.getElementById('toggle'); 
 
var state = document.getElementById('current-state'); 
 

 
button.addEventListener("click", toggleState); 
 

 
function toggleState() { 
 
    if (button.dataset.state == "on") { 
 
    button.dataset.state = "off"; 
 
    state.innerHTML = "I'm off"; 
 
    } else { 
 
    button.dataset.state = "on"; 
 
    state.innerHTML = "I'm on"; 
 
    } 
 
}

<button id="toggle" data-state="off">Toggle me!</button> 
 

 
<div id="current-state">I'm off</div>

Answer 4

アレックスヤングに似ていますが、もう少しコンパクトなアプローチ：

私の心に来て最初は次のようなものになるだろう

function toggleOn() { 
 
    console.log('on'); 
 
} 
 

 
function toggleOff() { 
 
    console.log('off'); 
 
} 
 

 
var button = document.getElementById('button'); 
 

 
button.addEventListener('click', function clickToggle() { 
 
    clickToggle.state = !clickToggle.state; 
 
    clickToggle.state ? toggleOn() : toggleOff(); 
 
});

<button id="button">Toggle</button>

これは、この方法で名前付き関数にプロパティをアタッチできるという事実を利用しています。私はこれについての正確な用語が何であるか分かりません。

---

ジョーFrambachの有効な懸念に対処するには、コメントで対処、あなたはそれを変更することができます：

button.addEventListener('click', function clickToggle() { 
    clickToggle.state = !clickToggle.state; 
    return (clickToggle.state ? toggleOn : toggleOff).apply(this, arguments); 
});