HTMLInputElement テキストボックスやドロップボックスなどの値を取得する

今回は、テキストボックスやドロップボックスなど、ユーザーが入力した内容や、何を選択したのかなどを取得する方法について見ていきます。

どれも「input」要素に関連するものになりますので「input」の使い方についても合わせて見ていきましょう。

テキストを取得
1. text
2. textarea
checked
1. チェックボックス
2. ラジオボタン
ドロップボックスの値を取得
あとがき

テキストを取得

text

value

    <label for="name"
      >名前：<input type="text" id="name" size="30px" />
      <input type="button" value="送信" id="sendname"
    /></label>

let newName = document.getElementById('name');
newName.value = '';

let sendName = document.getElementById('sendname');
sendName.addEventListener('click', () => {
  sendName.insertAdjacentHTML(
    'afterend',
    '<p>あなたの名前は ' + newName.value + ' さんですね</p>'
  );
});

名前：

ボックスに名前を入力すると、その入力した名前を取得してテキストを追加しています。

textarea

    <label
      >ご意見をお知らせください。<br />
      <textarea name="text" id="newtext" cols="30" rows="10"></textarea>
    </label>
    <div>
      <input type="button" id="send" value="送信" />
    </div>

let newTextarea = document.getElementById('newtext');
newTextarea.value = '';

let opinion = document.getElementById('send');
opinion.addEventListener('click', () => {
  opinion.insertAdjacentHTML('afterend', '<p>' + newTextarea.value + '</p>');
});

ご意見をお知らせください。

checked

チェックボックス

    <p>懇談会に参加される方はチェックを入れてください。</p>
    <label>参加<input type="checkbox" id="check" /></label>
    <div>
      <input type="button" id="part" value="送信" />
    </div>

let checkMeet = document.getElementById('check');
checkMeet.checked = true;

let checkButton = document.getElementById('part');
checkButton.addEventListener('click', () => {
  if (checkMeet.checked) {
    checkButton.insertAdjacentHTML('afterend', '<p>参加</p>');
  } else {
    checkButton.insertAdjacentHTML('afterend', '<p>不参加</p>');
  }
});

懇談会に参加される方はチェックを入れてください。

参加

checkedプロパティの値は、チェックされていれば、「true」、されていなければ「false」を返します。

ここではチェックボックスをデフォルトでチェックの入った状態にしています。

ラジオボタン

    <p>好きな動物を選んでください。</p>
    <label><input type="radio" value="キリン" name="animals" />キリン</label>
    <label
      ><input type="radio" value="ライオン" name="animals" />ライオン</label
    >
    <label><input type="radio" value="パンダ" name="animals" />パンダ</label>
    <label><input type="radio" value="ゾウ" name="animals" />ゾウ</label>
    <div>
      <input type="button" id="sendradio" value="送信" />
    </div>

let animalChoice = document.getElementsByName('animals');
let len = animalChoice.length;

let sendButton = document.getElementById('sendradio');
sendButton.addEventListener('click', () => {
  let buttonCheck = '';
  for (let i = 0; i < len; i++) {
    if (animalChoice.item(i).checked) {
      buttonCheck = animalChoice.item(i).value;
    }
  }
  sendButton.insertAdjacentHTML(
    'afterend',
    '<p>あなたの好きな動物は' + buttonCheck + 'です</p>'
  );
});

好きな動物を選んでください。

キリンライオンパンダゾウ

送信ボタンを押すと、ラジオボックスの値を取得して表示します。

ドロップボックスの値を取得

    <label for="animal">好きな動物は何ですか？</label>
    <select name="selectanimal" id="animal">
      <option value="キリン">キリン</option>
      <option value="ライオン">ライオン</option>
      <option value="パンダ">パンダ</option>
      <option value="ゾウ">ゾウ</option>
    </select>
    <div>
      <input type="button" id="senddrop" value="送信" />
    </div>

let selectAnimal = document.getElementById('animal');

let sendAnimal = document.getElementById('senddrop');
sendAnimal.addEventListener('click', () => {
  sendAnimal.insertAdjacentHTML(
    'afterend',
    '<p>あなたが選んだ動物は ' + selectAnimal.value + 'です。</p>'
  );
});

好きな動物は何ですか？

ドロップボックスの値を取得するには、「value」プロパティを使用します。

送信ボタンをクリックすると、選択した値を取得して表示します。