◀︎STUDY JavaScript_002-1 HTML: <input> タグ + JavaScript

-----

HTML <input>タグと <button>タグの違い

<input> タグと <button> タグはどちらもフォーム送信ボタンなどを作成できる.
<input> タグには閉じタグが無い.
どちらにも type="submit" / type="button" / type="reset" / type="image" など, 同じような Attribute+Value がある.
例えば <input type="button"> / <button type="button"> のように
<input type="button"value="ボタン"> は初期の HTML の書き方で, <button> タグ〜 </button> は HTML4 で追加された書き方.
クイズ: type="tel" は <input> タグと <button> タグのどちらで使用できのか?

<input> タグと JavaScript を組み合わせる

クリックすると文字列が表示されるボタンを設置してみましょう.
<input> タグの Attribute で type="button"value="ボタン"onclick="ぼたん()" を記述する.
<input type="button"value="ボタン"onclick="ぼたん()"
　
JavaScript で関数を作成する.
function ぼたん()
表示させる文字列を設定する.
document.write("クリックされました")

addEventListener メソッド

addEventListener()
ページが読み込まれた / マウスによるクリックがあった / キーボードの入力があった / などのアクションを受けて,
そのアクションからあらかじめ設定しておいた命令を実行するメソッド

サンプル - 1

<input> タグに Attribute で id="目印" が付けられている. クリックされると addEventListener("click",ぼたん) によってボタンをクリックすると新しく文字列が表示され, リロード・ボタンをクリックすると文字列が消える仕組みです.

サンプル - 2

<input> タグの Attribute でボタンではなくチェックボックスを選択しました　→　type="checkbox". これによって表示されたチェックボックスにチェックを入れると新しい文字列が表示されます.

サンプル - 3

チェックボックスを4つと id="目印_○" を4種類作成し, それぞれにチェックを入れると別々の文字列が表示される仕組みを作っています.

サンプル - 4

チェックボックスを4つと id="目印_○" を4種類作成し, チェックを入れたのちにボタン・クリックによって一括して文字列を表示させる仕組みを実現しています.

JavaScript : addEventListener() 解説

これらのイベントが発生したときに何かの関数を実行するのがaddEventListener()

動的 HTML: input について

-----

◀︎Contents　　　　　STUDY JavaScript_002-1