Javascript复选框只在点击一次时触发动画

Javascript checkbox only triggering animation when clicked through once?

本文关键字：一次 动画 复选框 Javascript      更新时间：2023-09-26

关于这个函数，它应该工作，并提供一个动画，当复选框被选中，但只有第二次。当不透明度改变时，css3是专门针对动画显示的，所以我尝试用window.onload()来接近它，看看它是否会有所不同，没有运气。你知道为什么会这样吗?真的取决于它的第一次点击。

编辑:我只是更有意义的指定，在窗口加载后，点击复选框不做任何事情。

function myFunction() {
    document.getElementById("check").onclick = function() {
    if (this.checked) {
        document.getElementById("win").style.opacity = "1";
    }
    else {
        document.getElementById("win").style.opacity = "0";
    }
};
}

.win {
  opacity:0;
  background-color: blue;
  width:200px;
  height:20px;
  }
<input type="checkbox" class="checkbox" id="check">
<div class="win">X</div>

这里的问题是您的函数第一次运行，其中创建事件处理程序。首先分配事件，然后它将在点击时运行。

您的订单是:

第一次点击:onclick被注册，没有被调用。

第二次点击:onclick被调用，因为第一次点击创建了它。

document.getElementById("check").onclick = function() {
    if (this.checked) {
        document.getElementById("win").style.opacity = "1";
    }
    else {
        document.getElementById("win").style.opacity = "0";
    }
};

删除myFunction，除非您立即调用它，分配事件处理程序。

相关文章：