切换按钮不起作用 - 使用 Javascript 功能

Question

我有一个切换圆形按钮，我使用下面的 javascript 进行切换，但是它没有移动 - 我已经用带有警报的 js 文件测试了 link不过它确实有效。

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

我的 html 如下所示，因为这两个选项都是隐藏在我的 CSS

上的#touchidY 显示

<tr>
  <td><img src='./icons/fingerprint@2x.png'></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>

以上是我 html

上的 table

Answer 1

许多错误：

你有两个开关，因为你有两个复选框。
通过执行 touchIdN.onclick(enableTouchId); 您将调用该函数，您应该在其中分配它 touchIdN.onclick = enableTouchId;
最好使用touchIdN.addEventListener(<event>, enableTouchId);
如果你在 HTML <label class="switch" id='touchidN' onclick='enableTouchId()'> 上分配回调，也不要在 JS 中添加，你不需要。采取一种方法并坚持下去（HTML 或 JS，通常不是两者）。

这是您快速编辑的代码，但不是最优的。

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/fingerprint@2x.png'></td>
  <td>Enable Touch ID</td>
  <td>
    <label class="switch">
      <input type="checkbox" id='touchid'>
      <span class="slider-round"></span>
    </label>
  </td>
</tr>

还要看看 W3C do sliders，他们是如何用 CSS 而不是 JS 来制作动画的。

切换按钮不起作用 - 使用 Javascript 功能

Toggle button not working - with Javascript function

javascript

function

toggle