Javascriptチェックボックスは、一度クリックするとアニメーションをトリガするだけですか？

Question

この機能に関しては、チェックボックスが選択されているときに2回目のアニメーションだけを配信します。 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を削除します。