JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで関数の実行結果をHTMLとして表示する方法

関数の結果をHTMLとして表示するには？

JavaScriptで関数の実行結果をHTMLとして画面に表示したい場合は、document.getElementById().innerHTML を使います。このプロパティに文字列や計算結果を代入することで、指定した要素の中身を動的に書き換えることができます。

innerHTMLはDOM操作の基本であり、ユーザーの操作に応じてリアルタイムに画面を更新したい場合によく利用されます。

サンプルコード

以下は、ページ内にあるテキストボックス（input type="text"）の数をカウントし、その結果をHTMLとして表示するコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
    <div>
        <input type="text">
        <br>
        <input type="text">
        <br>
        <input type="radio">
        <br>
        <input type="text">
        <br>
        <input type="radio">
        <br>
    </div>
    <br>
    <span id='totalNumberOfTextBox'></span>
</body>
<script>
    total_number_of_check_box();
    function total_number_of_check_box() {
        var inputObj = document.getElementsByTagName("input"),
        counter = 0;
        for (var i = 0; i < inputObj.length; i++) {
            if (inputObj[i].type == "text") {
                counter++;
            }
        }
        document.getElementById('totalNumberOfTextBox').innerHTML = "テキストボックスの総数 =" + counter;
    }
</script>
</html>

コードのポイント

document.getElementsByTagName("input") ですべてのinput要素を取得し、forループ内でtype属性が「text」のものだけをカウントしています。最後に、getElementById('totalNumberOfTextBox').innerHTML にカウント結果を代入することで、span要素内に関数の実行結果が表示される仕組みです。

プログラムの実行方法

上記のプログラムを実行するには、ファイル名を anyName.html（index.htmlなど）として保存してください。その後、VS Codeエディタで保存したファイルを右クリックし、「Open with Live Server」を選択すると、ブラウザで結果を確認できます。

出力結果

プログラムを実行すると、以下のようにテキストボックスの総数が画面に表示されます。

JavaScriptで関数の実行結果をHTMLとして表示する方法

  1. JavaScriptで入力フィールドにフォーカスを維持しながらコンソールにメッセージを表示する方法

    入力フィールドからフォーカスが外れた際に自動的にフォーカスを戻しながら、コンソールにメッセージを表示したい場合は、JavaScriptの focus() メソッドを活用することで実現できます。このテクニックを使えば、ユーザーがテキストボックスに入力を完了するまで、他の要素へフォーカスが移動しないように制御できます。 実装例 以下のコードでは、blur イベント（フォーカスが外れたときに発生）を検知してコンソールにメッセージを出力し、その後 focus() を呼び出すことで再び入力フィールドにフォーカスを設定しています。 <!DOCTYPE html> <html lang=j

  2. JavaScriptで指定した時刻になったら関数を自動実行する方法

    JavaScriptで「特定の日時に達したら関数を実行したい」というケースでは、目標時刻までの時間差（ミリ秒）を計算し、それを setTimeout() に渡すのが基本のアプローチです。ここでは、その実装手順をサンプルコードとともにわかりやすく解説します。 実装の流れ トリガーしたい日時を Date オブジェクトで作成し、getTime() でミリ秒値に変換します。 現在時刻も同様に getTime() でミリ秒として取得します。 「目標時刻 − 現在時刻」の差分を計算します。これが「あと何ミリ秒で目標時刻になるか」を表します。 差分を setTimeout() の第2引数に渡し、第1引数に