HTML-Berechnungsergebnis: Lernen Sie, das Output-Tag zu verwenden

Einführung

Das <output>-Tag ist ein neu eingefügtes Container-Element in HTML5. Es wird üblicherweise verwendet, um das Ergebnis einer beliebigen Berechnung auf einer Website/Anwendung anzuzeigen.

In diesem schrittweisen Labyrinth lernen Sie, wie Sie mithilfe des <output>-Tags mit HTML einen Ergebnisspeicherplatz erstellen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

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{{"HTML-Berechnungsergebnis"}} html/text_head -.-> lab-70812{{"HTML-Berechnungsergebnis"}} html/embed_media -.-> lab-70812{{"HTML-Berechnungsergebnis"}} html/forms -.-> lab-70812{{"HTML-Berechnungsergebnis"}} html/form_access -.-> lab-70812{{"HTML-Berechnungsergebnis"}} html/inter_elems -.-> lab-70812{{"HTML-Berechnungsergebnis"}} end

Fügen Sie das HTML-Output-Tag hinzu

Erstellen Sie auf Ihrem Computer eine HTML-Datei namens index.html.

Fügen Sie das <output>-Tag im Körperbereich Ihrer HTML-Datei hinzu.

<body>
  <h1>Resultatplatzhalter</h1>
  <output></output>
</body>

Fügen Sie Eingabeelemente hinzu

Erstellen Sie Eingabeelemente wie ein Textfeld oder einen Button, die verwendet werden können, um Ergebnisse im Ausgabeelement zu generieren. Definieren Sie das for-Attribut, das die Beziehung zwischen dem Ausgabeelement und dem Eingabeelement beschreibt.

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

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

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

Schreiben Sie eine JavaScript-Funktion

Schreiben Sie eine JavaScript-Funktion, um ein Ergebnis basierend auf der Benutzereingabe zu generieren.

<script>
  function calculateResult() {
    // Holen Sie sich die von dem Benutzer eingegebenen Werte
    var num1 = document.getElementById("number1").value;
    var num2 = document.getElementById("number2").value;

    // Speichern Sie das Ergebnis der Operation
    var result = parseInt(num1) + parseInt(num2);

    // Zeigen Sie das Ergebnis im Ausgabeelement an
    document.querySelector("output").value = result;
  }
</script>

Nachdem Sie die HTML- und JavaScript-Code geschrieben haben, öffnen Sie die HTML-Datei in Ihrem Webbrowser und testen Sie Ihren Ergebnisspeicherplatz.

Geben Sie zwei Zahlen in die Eingabefelder ein und klicken Sie auf die Schaltfläche "Berechnen". Die Summe dieser Zahlen sollte im Ausgabeelement angezeigt werden.

Zusammenfassung

Herzlichen Glückwunsch, Sie haben erfolgreich einen Ergebnisspeicherplatz mithilfe des <output>-Tags mit HTML erstellt. In diesem Labyrinth haben Sie gelernt, wie Sie Eingabeelemente hinzufügen und eine JavaScript-Funktion schreiben, um ein Ergebnis basierend auf der Benutzereingabe zu generieren. Sie können das Ausgabeelement verwenden, um die Ergebnisse von Berechnungen oder andere Ergebnisse auf Ihrer Website anzuzeigen.