Resultado de cálculo HTML: Aprende a usar la etiqueta de salida

Introducción

La etiqueta <output> es un elemento de contenedor recientemente introducido en HTML5. Por lo general, se utiliza para mostrar el resultado de cualquier cálculo en un sitio web/aplicación.

En este laboratorio paso a paso, aprenderá a crear un marcador de posición de resultado utilizando la etiqueta <output> con HTML.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70812{{"Resultado de cálculo HTML"}} html/text_head -.-> lab-70812{{"Resultado de cálculo HTML"}} html/embed_media -.-> lab-70812{{"Resultado de cálculo HTML"}} html/forms -.-> lab-70812{{"Resultado de cálculo HTML"}} html/form_access -.-> lab-70812{{"Resultado de cálculo HTML"}} html/inter_elems -.-> lab-70812{{"Resultado de cálculo HTML"}} end

Agregar la etiqueta de salida HTML

Cree un archivo HTML llamado index.html en su computadora.

Agregue la etiqueta <output> en la sección del cuerpo de su archivo HTML.

<body>
  <h1>Marcador de posición de resultado</h1>
  <output></output>
</body>

Agregar elementos de entrada

Cree elementos de entrada como un cuadro de texto o un botón que se pueden utilizar para generar resultados en el elemento de salida. Defina el atributo for que describe la relación entre el elemento de salida y el elemento de entrada.

<body>
  <h1>Marcador de posición de resultado</h1>
  <input type="text" id="number1" />
  <input type="text" id="number2" />

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

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

Escribir una función de JavaScript

Escriba una función de JavaScript para generar un resultado basado en la entrada del usuario.

<script>
  function calculateResult() {
    // Obtener los valores ingresados por el usuario
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    // Almacenar el resultado de la operación
    var result = parseInt(num1) + parseInt(num2);

    // Mostrar el resultado en el elemento de salida
    document.querySelector("output").value = result;
  }
</script>

Después de escribir el HTML y el JavaScript, abra el archivo HTML en su navegador web y pruebe su marcador de posición de resultado.

Ingrese dos números en los campos de entrada y haga clic en el botón "Calcular". La suma de estos números debe mostrarse en el elemento de salida.

Resumen

Felicitaciones, has creado con éxito un marcador de posición de resultado utilizando la etiqueta <output> con HTML. En este laboratorio, has aprendido cómo agregar elementos de entrada y escribir una función de JavaScript para generar un resultado basado en la entrada del usuario. Puedes utilizar el elemento de salida para mostrar el resultado de cálculos u otros resultados en tu sitio web.