Javascript function causing toggle button malfunction - troubleshoot required

Question

Javascript function causing toggle button malfunction - troubleshoot required

I am having trouble with a toggle round button and the corresponding JavaScript that I have implemented. It seems like the switch does not move, even though when I tested the link to the JS file with an alert it did work.

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);

In my HTML code, #touchidY is set to display hidden using CSS for both options.

<tr>
  <td><img src='./icons/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f090601080a1d1f1d06011b2f5d17411f0108">[email protected]</a>'></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 aforementioned code is included within a table in my HTML page.

javascript function toggle

Answer 1

Answer №1

Various mistakes detected:

The presence of TWO toggles is due to having two checkboxes.
Instead of invoking the function with touchIdN.onclick(enableTouchId);, you should assign it using
```
touchIdN.onclick = enableTouchId;
```

It is recommended to utilize

touchIdN.addEventListener(<event>, enableTouchId);

If you are defining the callback in the HTML with
```
<label class="switch" id='touchidN' onclick='enableTouchId()'>
```
, refrain from duplicating it in JS. Choose one method (HTML OR JS) and adhere to it, typically not both.

Your current code has been quickly modified for functionality, but there is room for optimization.

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


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

<tr>
  <td><img src='./icons/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aaccc3c4cdcfd8dad8c3c4deea98d284dac4cd">[email protected]</a>'></td>
  <td>Enable Touch ID</td>
  <td>
    <label class="switch">
      <input type="checkbox" id='touchid'>
      <span class="slider-round"></span>
    </label>
  </td>
</tr>

Furthermore, observe how W3C implements sliders; they employ CSS animations rather than JavaScript.

Answer 2

Various mistakes detected:

The presence of TWO toggles is due to having two checkboxes.
Instead of invoking the function with touchIdN.onclick(enableTouchId);, you should assign it using
```
touchIdN.onclick = enableTouchId;
```

It is recommended to utilize

touchIdN.addEventListener(<event>, enableTouchId);

If you are defining the callback in the HTML with
```
<label class="switch" id='touchidN' onclick='enableTouchId()'>
```
, refrain from duplicating it in JS. Choose one method (HTML OR JS) and adhere to it, typically not both.

Your current code has been quickly modified for functionality, but there is room for optimization.

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


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

<tr>
  <td><img src='./icons/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aaccc3c4cdcfd8dad8c3c4deea98d284dac4cd">[email protected]</a>'></td>
  <td>Enable Touch ID</td>
  <td>
    <label class="switch">
      <input type="checkbox" id='touchid'>
      <span class="slider-round"></span>
    </label>
  </td>
</tr>

Furthermore, observe how W3C implements sliders; they employ CSS animations rather than JavaScript.

Javascript function causing toggle button malfunction - troubleshoot required

Answer №1

Similar questions

After deploying to Firebase, animations suddenly cease to function

What is the best way to smoothly insert an item into a nested object within the state of a React component

Can I use the mouseover event on an image to display a sibling div?

What method would you recommend for modifying HTML text that has already been loaded using JSP?

Calling an ajax request to view a JSON pyramid structure

Node.js encountered an error: Attempting to access properties of an object that is undefined, specifically trying to read 'TokenType'

Unsatisfied Dependencies in NPM

What is the best way to determine if a URL parameter is present when compared to an Array?

Tips for Ensuring the Longevity of my Node.js Server

display data from a hashmap in a React component

Unable to reach the attribute while utilizing a pipe symbol

Even though the if statement has been implemented, the page continues to show null objects

Troubles encountered when populating the array within a Vue component

Is the resolving functionality of Webpack capable of resolving path definitions in AMD style?

Creating a VSCode extension using Vue: Step-by-step guide

How can I access a child element within an element using Protractor?

Tips for updating the content of a div with the click of another div

Unlocking the potential of Node.js: Mastering the art of passing extra parameters in async

I do not prefer output as my optimal choice

Javascript: Altering Link Color