多个切换按钮由单个功能控制

Question

Still learning the ropes of JS and attempting to create a function that will toggle a button on and off, this works just fine. using the following. (Please ignore the handlebars.js)

What I'm wondring is how do I create a single function to handle 6 seperate toggles.

Cheers in advance,

a newbie.

 function toggle(button) { if(document.getElementById("1").value=="OFF"){ document.getElementById("1").value="ON";} else if(document.getElementById("1").value=="ON"){ document.getElementById("1").value="OFF";} } 

  <input type="button" id="1" {{#if profile.userSettings.notificationSettings.enabled}} value="ON" {{else}} value="OFF" {{/if}} onclick="toggle(this); "> 

Answer 1

First of all, don't start an ID with a numeric.

For you main issue, you can simply use the parameter button of your function and check its value.

 function toggle(button){ button.value = button.value == 'OFF' ? 'ON' : 'OFF'; } 

 <input type="button" value="ON" onclick="toggle(this);"> <input type="button" value="OFF" onclick="toggle(this);"> <input type="button" value="ON" onclick="toggle(this);"> 

PS :

button.value = button.value == 'OFF' ? 'ON' : 'OFF'

Is the ternary operator equivalent of

if(button.value == 'OFF'){
    button.value = 'ON';
}else{
    button.value = 'OFF';
}