CODEWITHSUNDEEP
javascriptfunctiontoggle
Ana Grilo
Ana Grilo

Reputation: 13

Toggle button not working - with Javascript function

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

Upvotes: 0

Views: 405

Answers (1)

DDomen
DDomen

Reputation: 1878

Many errors:

  1. You have TWO toggles, because you have two checboxes.
  2. By doing touchIdN.onclick(enableTouchId); you are calling the function, where you were supposed to assign it touchIdN.onclick = enableTouchId;
  3. Is preferrable to use touchIdN.addEventListener(<event>, enableTouchId);
  4. 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.

Upvotes: 1

Related Questions