iPentec.com / Doc / HTML / HTMLタグ

結果を出力する領域を作成し、フォームの入力フィールドが変更されたタイミングで処理を実行する - oninputイベント outputタグの利用 - HTML

HTMLページで、結果を出力する領域を作成し、フォームの入力項目が変更されたタイミングで処理を実行するコードを紹介します。

概要

HTMLページで結果を出力する領域を明示的に定義する場合に、output タグを利用できます。
この記事では outputタグの記述について紹介します。

書式

プログラム例1 : oninputイベントの利用

コード

下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
      function OnInputExec() {
        var value1 = document.getElementById("input1");               
        var value2 = document.getElementById("input2");
        var result = Number(value1.value) + Number(value2.value);
        var output1 = document.getElementById("output1");
        output1.value = result;
      }
    </script>
</head>
<body>
  <form oninput="OnInputExec();">
    <input id="input1" type="number" />
    <input id="input2" type="number" />
    <hr />
    <output id="output1" for="input1 input2"/>
  </form>
</body>
</html>

解説

input 要素の値に変更があると、form の oninput イベントが実行されます。このコードでは、OnInputExec() 関数が呼び出されます。
OnInputExec関数では、2つのinput要素の値の数値を取得し、合計した値をoutput要素に設定しています。

実行結果

上記のHTMLファイルをWebブラウザで表示します。
下図のページが表示されます。

上部のinput要素の数値入力テキストボックスの値を変更します。値を変更するとすぐにテキストボックス下部のoutput要素に値が表示されます。片方のテキストボックスしか値が入力されていないためoutput要素には変更したテキストボックスの値と同じ数値が表示されています。

もう一つのinput要素の数値入力テキストボックスの値を変更します。値を変更するとすぐにoutput要素に値が反映されます。 2つのinput要素の値の合計値がoutput要素に表示されます。

プログラム例2

output要素を利用しない単純なプレースメントとしての利用です。

コード

下記のHTMLファイルを記述します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
      function ButtonClick() {
        var value1 = document.getElementById("input1");               
        var value2 = document.getElementById("input2");
        var result = Number(value1.value) + Number(value2.value);
        var output1 = document.getElementById("output1");
        output1.value = result;
      }
    </script>
</head>
<body>
  <input id="input1" type="number" />
  <input id="input2" type="number" />
  <hr/>
  <button id="button1" onclick="ButtonClick();">Exec</button>
  <hr />
  <output id="output1" for="input1 input2"/>
</body>
</html>