テキストボックスに入力された文字を取得する
Webページでテキストボックスを表示するには、HTMLで以下のように書く。
JavaScriptでは、ここに入力された文字を、
のように「.value」と記述することで取得できる。
id属性に「mytext」という値を持つテキストボックスを配置したのであれば、ここに入力された文字は
という表記で取得できる。
◆getElementByIdの注意点
・"Id"の"I"は小文字のl(エル)ではなく大文字のI(アイ)である。
・指定したID名がHTMLドキュメント内で見つからない場合、getElementByIdの戻り値としてnullが返る。
・同じIDが同じドキュメント内に重複してしまった場合は、初回に合致した要素しか取得されない。
入力されたテキストを表示する
テキストボックスに文字を入力して、送信ボタンを押すと入力された文字を返すプログラムを考える(完成は上の図のコード)。
1. 土台作成
特に言うことは無し。
2. head要素に文字コードとタイトル、body要素に見出しを加える。
3. body要素に加えたいのは
・テキストボックス(id属性は「mytext」)
・送信ボタン(起動するスクリプトは"buttonclick()")
の2つなのでこれを満たすコードを加える。
4. buttonclick関数は「配置したテキストボックスに入力された文字を取得して、それを画面にポップアップ表示する」と定義するとコードは
となる。これをブラウザで実行してみると
このようなものが表示される。これに少し手を加えると目標のコードになる事が分かる。
※ 内容はちゃんと使える力を身につける JavaScriptのきほんのきほんのChapter3をまとめたものに少しアレンジを加えたものです。