Javascript(JavascriptでHTMLフォームに入力された文字を取得し表示)

目的

テキストフォームに入力されたデータを取得する。

そして、[フォームに入力された値] を検索中です。　と画面に表示させる。

コード

HTML

form.html

<form action ="#" id ="form">
  <input type ="text" name ="word">
  <input type ="submit" value ="送信">
</form>

<p id="output"></p>

Javascript

app.js

  use 'strict';

  document.getElementById('form').onsubmit = function(event){
  event.preventDefault();
  const input = document.getElementById('form').word.value;
  document.getElementById('output').textContent = `${input}の検索中です。`;
  };

解説

1行目

app.js

  document.getElementById('form').onsubmit = function(event){
  };

formというidを持ったフォームが送信された時に処理を実行させるという意味。

2行目

app.js

  event.preventDefault();

formタグの次のページにいくという基本動作を無効にするためイベントオブジェクトのpreventDefaultメソッドを使用。

3行目

app.js

  const input = document.getElementById('form').word.value;

name属性がwordのインプットフォームに入力された値を取得して、定数 input に格納。

4行目

app.js

  document.getElementById('output').textContent = `${input}の検索中です。`;

idがoutputの要素に フォームに入力された値である定数inputと共に表示。

引用

確かな力がつくJavaScript超入門 狩野　祐東