Résultat de calcul HTML: Apprenez à utiliser la balise Output

Introduction

La balise <output> est un nouvel élément de conteneur introduit dans HTML5. Elle est couramment utilisée pour afficher le résultat de tout calcul sur un site web/une application.

Dans ce tutoriel étape par étape, vous allez apprendre à créer un emplacement réservé pour le résultat à l'aide de la balise <output> avec HTML.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL 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(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) 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{{"Résultat de calcul HTML"}} html/text_head -.-> lab-70812{{"Résultat de calcul HTML"}} html/embed_media -.-> lab-70812{{"Résultat de calcul HTML"}} html/forms -.-> lab-70812{{"Résultat de calcul HTML"}} html/form_access -.-> lab-70812{{"Résultat de calcul HTML"}} html/inter_elems -.-> lab-70812{{"Résultat de calcul HTML"}} end

Ajoutez la balise de sortie HTML

Créez un fichier HTML nommé index.html sur votre ordinateur.

Ajoutez la balise <output> dans la section corps de votre fichier HTML.

<body>
  <h1>Emplacement réservé pour le résultat</h1>
  <output></output>
</body>

Ajoutez des éléments d'entrée

Créez des éléments d'entrée tels qu'une zone de texte ou un bouton qui peuvent être utilisés pour générer des résultats dans l'élément de sortie. Définissez l'attribut for décrivant la relation entre l'élément de sortie et l'élément d'entrée.

<body>
  <h1>Emplacement réservé pour le résultat</h1>
  <input type="text" id="number1" />
  <input type="text" id="number2" />

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

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

Écrivez une fonction JavaScript

Écrivez une fonction JavaScript pour générer un résultat en fonction de l'entrée de l'utilisateur.

<script>
  function calculateResult() {
    // Obtenez les valeurs saisies par l'utilisateur
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    // Stockez le résultat de l'opération
    var result = parseInt(num1) + parseInt(num2);

    // Affichez le résultat dans l'élément de sortie
    document.querySelector("output").value = result;
  }
</script>

Après avoir écrit le HTML et le JavaScript, ouvrez le fichier HTML dans votre navigateur web et testez votre emplacement réservé pour le résultat.

Entrez deux nombres dans les champs d'entrée et cliquez sur le bouton "Calculer". La somme de ces nombres devrait être affichée dans l'élément de sortie.

Récapitulatif

Félicitations, vous avez réussi à créer un emplacement réservé pour le résultat à l'aide de la balise <output> avec HTML. Dans ce laboratoire, vous avez appris à ajouter des éléments d'entrée et à écrire une fonction JavaScript pour générer un résultat en fonction de l'entrée de l'utilisateur. Vous pouvez utiliser l'élément de sortie pour afficher le résultat de calculs ou tout autre résultat sur votre site web.