##今回のポイント
-
HTMLのチェックボックスに
clickEventを設定 -
チェックがトグルと
console.logにメッセージを表示 -
加えて、body に対し
classList.toggleで背景色を付与
##【HTML】
<body>
<input type="checkbox" id="check">
<script src ="main.js"></script>
</body>
##【CSS】
.black {
background: #333;
}
##【JavaScript】
const checkBox = document.getElementById('check');
checkBox.addEventListener('click', () => {
document.body.classList.toggle('black'); // body に背景色を追加
if (checkBox.checked) {
console.log('チェックされたよ');
} else {
console.log('外れたよ');
}
});