<div class="container">
  <input type="checkbox" id="checkbox" />
  <span id="checkboxText">チェックしてください</span>
</div>
<style>
  .container {
    padding: 24px;
    text-align: center;
  }
  #checkboxText {
    font-size: 16px;
    color: #333;
  }
</style>


const checkbox = document.getElementById('checkbox')
const checkboxText = document.getElementById('checkboxText')

checkbox.addEventListener('change', function () {
  // 問題1. チェック済かどうかによって条件分岐をさせてください
  if (checkbox.checked) {
    // 問題2. チェックボックスの値によって表示するテキストを変更させてください
    checkboxText.textContent = 'チェック済'
  } else {
    checkboxText.textContent = 'チェックしてください'
  }
})


changeイベント

checked

if文

else節

element.textContent

~~~javascript
var element = $(1).getElementById($('2'));
element.textContent = $('3');
console.log(element.textContent);
~~~

無名関数（匿名関数）

const checkbox = document.getElementById('checkbox')
const checkboxText = document.getElementById('checkboxText')

checkbox.addEventListener('change', function () {
  // 問題1. チェック済かどうかによって条件分岐をさせてください
  // 問題2. チェックボックスの値によって表示するテキストを変更させてください
})



    // const answer1 = 'if(){ } else { }'
    const answer2 = 'checkbox.checked';
    const answer3 = "checkboxText.textContent = 'チェック済'";
    const answer4 = "checkboxText.textContent = 'チェックしてください'";
    const hint1 = '無名関数の中に`*if() {} else {}*`と記述してください';
    const hint2 = '`if()`の中に条件を書いてください';
    const hint3 = '`if(checkbox.checked){ }`の中に処理を書いてください。`textContent`を使います';
    const hint4 = 'else{ }の中に処理を書いてください。`textContent`を使います';
    const questions = [
        {
            title: 'チェック済かどうかによって条件分岐をさせてください',
            tests: [
                {
                    title: 'if else文を書こう',
                    hint: hint1,
                    test: () => {
                        isContainTextInEditor('if');
                        isContainTextInEditor('(');
                        isContainTextInEditor('){');
                        isContainTextInEditor('} else {');
                        isContainTextInEditor('}');
                    }
                },
                {
                    title: '分岐のための条件を設定しよう',
                    hint: hint2,
                    test: () => {
                        isContainTextInEditor(answer2);
                    }
                }
            ]
        },
        {
            title: 'チェックボックスの値によって表示するテキストを変更させてください',
            tests: [
                {
                    title: 'チェック済の場合の処理を記述しよう',
                    hint: hint3,
                    test: () => {
                        isContainTextInEditor(answer3);
                    }
                },
                {
                    title: 'チェック済でない場合の処理を記述しよう',
                    hint: hint4,
                    test: () => {
                        isContainTextInEditor(answer4);
                    }
                }
            ]
        }
    ];


changeイベントをカスタマイズ

document.addEventListener()

clickイベント

mouseoverイベント

イベントとは

DOMContentLoaded

HTMLを読み込ませてからイベントを処理

this

ボタンをクリックしてテキストを変更

createElement(tag_type)

element.appendChild(element)

【演習1】 クリックしたらリスト要素が追加されるボタンを実装しよう

submitイベント

e.preventDefault()

value

submitイベントをカスタマイズ

HTMLFormElement.reset()

disabled

submitイベントをカスタマイズ2

else if

【演習2】 フォームを作成しよう

mouseoutイベント

element.style

mouseoverイベントをカスタマイズ

document.removeEventListener()

イベントの設定を削除

scrollイベント

scroll系

scrollイベントをカスタマイズ

【総合問題】ページトップへ戻るボタンを実装しよう

avaScript DOMイベント操作でアクションを実行しよう

「JavaScript DOM イベント操作でアクションを実行しよう」レッスンの総復習クイズです。

```html
<button id="myButton">クリックすると…</button>
```

```js
const button = document.getElementById('myButton');

button.addEventListener('click', function(){
    $(1).textContent = 'テキストが変わるよ！';
});
```

JavaScript DOM イベント操作でアクションを実行しようの総復習クイズ

JavaScript DOM イベント操作でアクションを実行しよう

changeイベントをカスタマイズ

まずは必要なスキルを確認しましょう！