Флажок Javascript запускает только анимацию при щелчке через один раз?

Question

Что касается этой функции, она работает так, как должна, и предоставляет анимацию при выборе флажка, но только во второй раз. 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>

Answer 1

Проблема здесь ваша функция запускается первый раз, что создает обработчик события. Сначала назначьте событие, а затем он будет запускаться по щелчку.

Ваш заказ:

первый щелчок: OnClick зарегистрирован, и не называется.

2-й клик: onclick вызывается, так как первый клик создал его.

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

Удалить myFunction, если вы не вызовите его сразу, назначив обработчик события.