HTML Calculation Result: Learn to Use the Output Tag

Introduction

The <output> tag is a newly introduced container element in HTML5. It is commonly used to display the result of any calculation on a website/app.

In this step-by-step lab, you will learn how to create a result placeholder using the <output> tag with HTML.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_valid("`Form Validation`") subgraph Lab Skills html/basic_elems -.-> lab-70812{{"`HTML Calculation Result`"}} html/text_head -.-> lab-70812{{"`HTML Calculation Result`"}} html/forms -.-> lab-70812{{"`HTML Calculation Result`"}} html/form_valid -.-> lab-70812{{"`HTML Calculation Result`"}} end

Add the HTML Output Tag

Create an HTML file named index.html on your computer.

Add the <output> tag in the body section of your HTML file.

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

Add Input Elements

Create input elements such as a text box or button that can be used to generate results in the output element. Define the for attribute describing the relationship between the output element and the input element.

<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>

Write JavaScript Function

Write a JavaScript function to generate a result based on the user input.

<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>

After writing the HTML and JavaScript, open the HTML file in your web browser and test your result placeholder.

Enter two numbers in the input fields and click on the "Calculate" button. The sum of these numbers should be displayed in the output element.

Summary

Congratulations, you have successfully created a result placeholder using the <output> tag with HTML. In this lab, you have learned how to add input elements and write a JavaScript function to generate a result based on user input. You can use the output element to display the result of calculations or any other results on your website.

HTML Calculation Result