HTML 計算結果：output タグの使い方を学ぶ

はじめに

<output> タグは、HTML5 で新しく導入されたコンテナ要素です。Web サイトやアプリで計算結果を表示するために一般的に使用されます。

このステップバイステップの実験（Lab）では、HTML を使用して <output> タグで結果のプレースホルダーを作成する方法を学びます。

注意：index.html でコーディングを練習できます。Visual Studio Code で HTML を記述する方法を参照してください。Web サービスをポート 8080 で実行するには、右下の「Go Live」をクリックしてください。その後、Web 8080 タブをリフレッシュして Web ページをプレビューできます。

HTML output タグを追加する

コンピュータ上に index.html という名前の HTML ファイルを作成します。

HTML ファイルの body セクションに <output> タグを追加します。

<body>
  <h1>Result Placeholder</h1>
  <output></output>
</body>

入力要素を追加する

テキストボックスやボタンなど、output 要素で結果を生成するために使用できる入力要素を作成します。output 要素と入力要素の関係を記述する for 属性を定義します。

<body>
  <h1>Result Placeholder</h1>
  <input type="text" id="number1" />
  <input type="text" id="number2" />

  <button onclick="calculateResult()">Calculate</button>

  <output for="number1 number2"></output>
</body>

JavaScript 関数を記述する

ユーザーの入力に基づいて結果を生成する JavaScript 関数を記述します。

<script>
  function calculateResult() {
    // Get the values entered by the user
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    // Store the result of the operation
    var result = parseInt(num1) + parseInt(num2);

    // Display the result in the output element
    document.querySelector("output").value = result;
  }
</script>

HTML と JavaScript を記述した後、Web ブラウザで HTML ファイルを開き、結果プレースホルダーをテストします。

入力フィールドに 2 つの数字を入力し、「Calculate」ボタンをクリックします。これらの数字の合計が output 要素に表示されるはずです。

まとめ

おめでとうございます。HTML を使用して <output> タグで結果プレースホルダーを正常に作成しました。この実験では、入力要素を追加し、ユーザーの入力に基づいて結果を生成する JavaScript 関数を記述する方法を学びました。output 要素を使用して、計算結果やその他の結果を Web サイトに表示できます。