Resultado de Cálculo em HTML: Aprenda a Usar a Tag Output

Introdução

A tag <output> é um elemento container recém-introduzido no HTML5. É comumente usado para exibir o resultado de qualquer cálculo em um site/aplicativo.

Neste laboratório passo a passo, você aprenderá como criar um espaço reservado para resultados usando a tag <output> com HTML.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Adicione a Tag Output em HTML

Crie um arquivo HTML chamado index.html no seu computador.

Adicione a tag <output> na seção body do seu arquivo HTML.

<body>
  <h1>Espaço Reservado para Resultado</h1>
  <output></output>
</body>

Adicione Elementos de Input

Crie elementos de entrada, como uma caixa de texto ou botão, que podem ser usados para gerar resultados no elemento de saída. Defina o atributo for descrevendo a relação entre o elemento de saída e o elemento de entrada.

<body>
  <h1>Espaço Reservado para Resultado</h1>
  <input type="text" id="number1" />
  <input type="text" id="number2" />

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

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

Escreva a Função JavaScript

Escreva uma função JavaScript para gerar um resultado com base na entrada do usuário.

<script>
  function calculateResult() {
    // Obter os valores inseridos pelo usuário
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    // Armazenar o resultado da operação
    var result = parseInt(num1) + parseInt(num2);

    // Exibir o resultado no elemento output
    document.querySelector("output").value = result;
  }
</script>

Após escrever o HTML e JavaScript, abra o arquivo HTML no seu navegador web e teste o seu espaço reservado para o resultado.

Insira dois números nos campos de entrada e clique no botão "Calcular". A soma desses números deve ser exibida no elemento de saída.

Resumo

Parabéns, você criou com sucesso um espaço reservado para o resultado usando a tag <output> com HTML. Neste laboratório, você aprendeu como adicionar elementos de entrada e escrever uma função JavaScript para gerar um resultado com base na entrada do usuário. Você pode usar o elemento de saída para exibir o resultado de cálculos ou quaisquer outros resultados em seu site.