submitイベント

HTMLFormElement.reset()

disabled

<form id="myForm">
  <div class="name_area">
    <input type="text" id="username" name="username" required />
    <button id="btn" type="submit">一回だけ送信可能</button>
  </div>
  <br />
</form>
<div id="result">
  
</div>

<style>
  #myForm {
    margin: 24px;
  }
  .name_area {
    display: flex;
    align-items: center;
  }
  input[type='text'] {
    width: 50%;
    padding: 10px;
    border: 1px solid #ccc;
    margin-right: 8px;
  }

  button[type='submit'] {
    padding: 10px 20px;
    background-color: #0091ea;
    color: white;
    border: none;
    cursor: pointer;
  }
  #result {
    margin: 24px;
    font-size: 24px;
  }
</style>

const form = document.getElementById('myForm')
const username = document.getElementById('username')
const btn = document.getElementById('btn')
const resultElement = document.getElementById('result')

form.addEventListener('submit', function (e) {
  e.preventDefault()
  const inputValue = username.value
  resultElement.textContent = inputValue
  // 問題1. フォームの送信後、フォームを空にしてください
  form.reset()
  // 問題2. ボタンを無効にして、二重送信を防いでください
  btn.disabled = true
})


const form = document.getElementById('myForm')
const username = document.getElementById('username')
const btn = document.getElementById('btn')
const resultElement = document.getElementById('result')

form.addEventListener('submit', function (e) {
  e.preventDefault()
  const inputValue = username.value
  resultElement.textContent = inputValue
  // 問題1. フォームの送信後、フォームを空にしてください
  // 問題2. ボタンを無効にして、二重送信を防いでください
})


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

document.addEventListener()

clickイベント

mouseoverイベント

イベントとは

DOMContentLoaded

無名関数（匿名関数）

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

this

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

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

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

element.textContent

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

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

createElement(tag_type)

element.appendChild(element)

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

changeイベント

checked

if文

else節

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

e.preventDefault()

value

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

else if

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

mouseoutイベント

element.style

~~~javascript
document.getElementById($(1)).style.$(2) = $(3);
~~~

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

document.removeEventListener()

イベントの設定を削除

scrollイベント

scroll系

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

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

イベント処理の基礎を学び、ページにインタラクティブな動作を追加する方法を習得します。
実際のウェブサイト制作に直結する知識が身につきます。

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

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

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