初心者必見！JavaScriptのvalueを使いこなす7つの方法

はじめに
●JavaScriptのvalueとは
- ○value属性の基本
●valueの使い方
●valueの応用例
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptのvalueを使いこなす方法が身につくでしょう。

●JavaScriptのvalueとは

JavaScriptのvalueは、HTMLのフォーム要素の値を扱うための属性です。

テキストボックスやセレクトボックス、ラジオボタン、チェックボックスなど、様々なフォーム要素の値を取得・設定することができます。

○value属性の基本

JavaScriptでvalue属性を使うには、まず対象のフォーム要素を取得する必要があります。

これには、document.getElementByIdやdocument.querySelectorなどのDOM操作メソッドを使います。

そして、取得した要素のvalue属性にアクセスすることで、値を取得・設定できます。

●valueの使い方

さまざまなフォーム要素の値を取得・設定する方法を見ていきましょう。

具体的なサンプルコードを通じて、valueの使い方を学びます。

○サンプルコード1：テキストボックスの値を取得する

このコードでは、テキストボックスの値を取得してアラートで表示しています。

この例では、getElementByIdでテキストボックスの要素を取得し、そのvalueをアラートで表示しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>テキストボックスの値を取得</title>
</head>
<body>
  <input type="text" id="myText">
  <button onclick="getValue()">値を取得</button>

  <script>
    function getValue() {
      // テキストボックスの要素を取得
      const textBox = document.getElementById('myText');
      // 値を取得してアラートで表示
      alert(textBox.value);
    }
  </script>
</body>
</html>

○サンプルコード2：セレクトボックスの選択値を取得する

このコードでは、セレクトボックスの選択値を取得してアラートで表示しています。

この例では、getElementByIdでセレクトボックスの要素を取得し、そのvalueをアラートで表示しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>セレクトボックスの選択値を取得</title>
</head>
<body>
  <select id="mySelect">
    <option value="apple">りんご</option>
    <option value="orange">みかん</option>
    <option value="banana">バナナ</option>
  </select>
  <button onclick="getSelectedValue()">選択値を取得</button>

  <script>
    function getSelectedValue() {
      // セレクトボックスの要素を取得
      const selectBox = document.getElementById('mySelect');
      // 選択値を取得してアラートで表示
      alert(selectBox.value);
    }
  </script>
</body>
</html>

○サンプルコード3：ラジオボタンの選択値を取得する

このコードでは、ラジオボタンの選択値を取得してアラートで表示しています。

この例では、querySelectorで選択されたラジオボタンの要素を取得し、そのvalueをアラートで表示しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ラジオボタンの選択値を取得</title>
</head>
<body>
  <input type="radio" name="fruit" value="apple">りんご
  <input type="radio" name="fruit" value="orange">みかん
  <input type="radio" name="fruit" value="banana">バナナ
  <button onclick="getSelectedValue()">選択値を取得</button>

  <script>
    function getSelectedValue() {
      // 選択されたラジオボタンの要素を取得
      const radioButton = document.querySelector('input[name="fruit"]:checked');
      // 選択値を取得してアラートで表示
      alert(radioButton.value);
    }
  </script>
</body>
</html>

○サンプルコード4：チェックボックスの選択状態を取得する

このコードでは、チェックボックスの選択状態を取得してアラートで表示しています。

この例では、getElementByIdでチェックボックスの要素を取得し、そのcheckedプロパティで選択状態を調べています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>チェックボックスの選択状態を取得</title>
</head>
<body>
  <input type="checkbox" id="myCheckbox">同意する
  <button onclick="getCheckedStatus()">選択状態を取得</button>

  <script>
    function getCheckedStatus() {
      // チェックボックスの要素を取得
      const checkBox = document.getElementById('myCheckbox');
      // 選択状態を取得してアラートで表示
      alert(checkBox.checked);
    }
  </script>
</body>
</html>

●valueの応用例

○サンプルコード5：テキストボックスの値をリアルタイムで表示する

このコードでは、テキストボックスに入力された値をリアルタイムで表示する方法を紹介しています。

この例では、oninputイベントを使って、テキストボックスの値が変更されるたびに、その値を表示領域に反映しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>テキストボックスの値をリアルタイムで表示</title>
</head>
<body>
  <input type="text" id="inputText" oninput="displayValue()">
  <p id="displayText"></p>

  <script>
    function displayValue() {
      // テキストボックスの要素を取得
      const inputText = document.getElementById('inputText');
      // 表示領域の要素を取得
      const displayText = document.getElementById('displayText');
      // 入力値を表示領域に反映
      displayText.textContent = inputText.value;
    }
  </script>
</body>
</html>

○サンプルコード6：フォームの入力値をまとめて処理する

このコードでは、フォーム内の複数の入力値をまとめて処理する方法を紹介しています。

この例では、submitイベントを使って、フォームが送信される際に、すべての入力値をアラートで表示しています。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>フォームの入力値をまとめて処理</title>
</head>
<body>
  <form onsubmit="event.preventDefault(); processFormInputs();">
    <input type="text" id="name" placeholder="名前">
    <input type="email" id="email" placeholder="メールアドレス">
    <button type="submit">送信</button>
  </form>

  <script>
    function processFormInputs() {
      // 入力要素を取得
      const name = document.getElementById('name');
      const email = document.getElementById('email');
      // 入力値をアラートで表示
      alert(`名前: ${name.value}, メールアドレス: ${email.value}`);
    }
  </script>
</body>
</html>

○サンプルコード7：条件に応じてフォームの値を変更する

このコードでは、条件に応じてフォームの値を変更する方法を紹介しています。

この例では、チェックボックスがチェックされた場合、テキストボックスにあらかじめ設定された値が自動入力されます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>条件に応じてフォームの値を変更</title>
</head>
<body>
  <input type="text" id="inputText" placeholder="テキストを入力">
  <label>
    <input type="checkbox" id="autoInput" onchange="setDefaultValue()">
    デフォルト値を設定
  </label>

  <script>
    function setDefaultValue() {
      // テキストボックスとチェックボックスの要素を取得
      const inputText = document.getElementById('inputText');
      const autoInput = document.getElementById('autoInput');
      
      // チェックボックスがチェックされている場合、デフォルト値を設定
      if (autoInput.checked) {
        inputText.value = 'デフォルト値';
      } else {
        // チェックが外れた場合、テキストボックスをクリア
        inputText.value = '';
      }
    }
  </script>
</body>
</html>