Toggle button not working - with Javascript function

Question

I have a toggle round button which I have used the below javascript to make the switch, however it doesn't move - I have test the link with the js file with an alert and it does work though.

let touchIdN = document.getElementById('touchidN');
let touchIdY = document.getElementById('touchidY');
    
touchIdN.hidden = false;
touchIdY.hidden = true;
    
let enableTouchId = () => {
  touchIdY.hidden = false;
  touchIdN.hidden = true;
}
    
let disableTouchId = () => {
   touchIdY.hidden = true;
   touchIdN.hidden = false;
}
    
touchIdN.onclick(enableTouchId);
touchIdY.onclick(disableTouchId);

my html goes as follows for both options being the #touchidY display hidden on my CSS

<tr>
  <td><img src='./icons/[email protected]'></td>
  <td>Enable Touch ID</td>
  <td>
    <label class="switch" id='touchidN' onclick='enableTouchId()'>
      <input type="checkbox">
      <span class="slider-round"></span>
    </label>
    <label class="switch-yellow" id='touchidY' onclick='disableTouchId()'>
      <input type="checkbox">
      <span class="slider-back"></span>
    </label>
  </td>
</tr>

the above is inside a table on my html

because your are using FOUR onclick action. you better use your debugger for this kind of problem — Mister Jojo
– Mister Jojo, Commented Feb 2, 2021 at 18:09

DDomen · Accepted Answer · 2021-02-02 18:45:20Z

Many errors:

You have TWO toggles, because you have two checboxes.
By doing touchIdN.onclick(enableTouchId); you are calling the function, where you were supposed to assign it touchIdN.onclick = enableTouchId;
Is preferrable to use touchIdN.addEventListener(<event>, enableTouchId);
If you assign the callback on the HTML <label class="switch" id='touchidN' onclick='enableTouchId()'> do not add also in JS, you don't need. Take an approach and stick to it (HTML OR JS, usually not both).

This is your code fastly edited working, but it is not optimal.

let touchId = document.getElementById('touchid');


let toggleTouchId = (active) => {
  console.log(active)
  if (active) {
    // Your enable touch procedures
  }
  else {
    // Your disable touch procedures
  }
}
    
touchId.addEventListener('change', function() {
  toggleTouchId(this.checked);
});

<tr>
  <td><img src='./icons/[email protected]'></td>
  <td>Enable Touch ID</td>
  <td>
    <label class="switch">
      <input type="checkbox" id='touchid'>
      <span class="slider-round"></span>
    </label>
  </td>
</tr>

And also take a look on how W3C do sliders, they animate it with CSS, not JS.

Collectives™ on Stack Overflow

Toggle button not working - with Javascript function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related