JavaScriptでのテキストフィールドの操作
ここでは、サイトのユーザーからテキストを取得する方法を学びます。このために、HTMLにはデータ入力用のテキストフィールドを表す特別なタグ input が用意されています。
<input>
このタグには、ページにアクセスしたときにインプットに表示される初期テキストを設定する特別な属性 value があります:
<input value="text">
サイトのユーザーは、ページにアクセスした後、インプットのテキストを変更できます。このとき、このインプットへの参照を含む変数がある場合、その変数のプロパティ value には常にインプットの現在のテキスト値が格納されます。
実際に試してみましょう。属性 value を持つインプットがあるとします:
<input id="elem" value="text">
このインプットへの参照を変数に取得しましょう:
let elem = document.querySelector('#elem');
では、インプットの現在のテキストを画面に出力します:
console.log(elem.value);
次に、インプットのテキストを別のものに変更します:
elem.value = 'new text';
インプットとボタンが与えられています。ボタンをクリックすると、インプットに何らかのテキストを書き込んでください。
インプット、段落、ボタンが与えられています。ボタンをクリックすると、インプットから取得したテキストを段落に書き込んでください。
2つのインプットとボタンが与えられています。最初のインプットにユーザーが数値を入力します。ボタンをクリックすると、入力された数値の2乗を2番目のインプットに書き込んでください。
2つのインプットとボタンが与えられています。ボタンをクリックすると、最初のインプットに2番目のインプットの値を書き込み、2番目のインプットに最初のインプットの値を書き込んでください。あなたのコードは、インプットの値に関係なく汎用的に動作する必要があります。
5 つのインプット、段落、ボタンが与えられています。インプットに数値が入力されます。ボタンをクリックすると、入力された数値の算術平均を段落に書き込んでください。