Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

HTML/Formulare/Ergebnisausgabe

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Das output-Element ist das Gegenstück des input-Elements und dient zur Ausgabe des Ergebnisses einer Benutzereingabe oder einer Berechnung der Applikation.

  • HTML5
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Folgende Attribute sind möglich:

  • for: IDs von einem oder mehreren input-Elementen, auf welche sich die Berechnung bezieht (leerzeichen-getrennte Liste von IDs)
  • name: dient wie beim input-Element für eine einmalige Namensbesetzung

Anwendungsbeispiele[Bearbeiten]

Ausgabe der Werte eines Schiebereglers[Bearbeiten]

<h2>Ergebnisausgabe eines Schiebereglers</h2>
<label for="volume">Lautstärke:</label>
<input type="range" id="volume" value="50">
<output id="output" for="volume">50</output>
Der Wert des Schiebereglers wird mit dem input-Event ausgelesen und im output-Element wieder ausgegeben.
function ausgeben(ev) {
    document.getElementById('output').value = ev.target.value;
}

document.getElementById('volume').addEventListener('input', ausgeben);
Beachten Sie: Dieses Beispiel funktioniert im Internetexplorer nicht:
  • Der IE verwendet das input-Event nicht korrekt und
  • stellt den Wert (value) des output-Elements nicht dar.
Beachten Sie: Ohne die Verfügbarkeit von JavaScript ist die Berechnung des im output-Element ausgegebenen Werts nicht möglich. Deshalb ist es überlegens- und empfehlenswert, das output-Element erst vor der Ausgabe des Werts mit createElement dynamisch zu erzeugen und das input-Event mittels AddEventListener anzubinden.
Einfacher als das wäre wohl <output hidden="hidden"></output> und das hidden-Attribut per JavaScript entfernen.

Ausgabe eines Stundenzettels[Bearbeiten]

<form id="myForm">
  <legend>Rechnung</legend>

  <label for="stunden">Arbeitsstunden</label>
  <input type="number" min="0" id="stunden" value="0" step=".25">

  <label for="satz">Stundensatz (€)</label>
  <input type="number" min="8,5" id="satz" value="48.50" step="0.50">

  <label for="mwst">MwSt (%)</label>
  <input type="number" min="0" id="mwst" value="19">

  <p><span>Gesamt:</span> <output id="betrag" for="stunden satz mwst">0</output></p>
</form>
In drei Eingabefeldern werden Werte für die Anzahl der geleisteten Stunden, des Stundensatzes und der Mehrwertsteuer abgefragt. Um Fehleingaben zu vermeiden, wird das Eingabefeld mit type=number auf die Eingabe von Zahlen beschränkt.
Der berechnete Wert wird in einem output-Element ausgegeben.
document.getElementById("myForm").addEventListener("input", rechne);
	
function rechne() {
var stunden = document.getElementById('stunden'),
    satz  = document.getElementById('satz'),
    mwst  = document.getElementById('mwst');
var summe  = stunden.valueAsNumber * satz.valueAsNumber * (1 + mwst.valueAsNumber/100);
    
summe = summe.toFixed(2);
document.getElementById('betrag').value = summe;
}
In diesem Beispiel wird der Eventhandler mit addEventListener dynamisch angehängt. Wenn etwas ins Formular eingegeben wird, feuert das input-Event und ruft die Funktion rechne() auf.

In dieser Funktion werden die Werte abgerufen und berechnet. Anschließend wird die summe mit toFixed(2) kaufmännisch auf zwei Stellen gerundet.

Beachten Sie: Dieses Beispiel funktioniert im Internetexplorer nicht:
  • Der IE 8 und älter unterstützt das input-Event nicht,
  • der IE 11 und älter stellt den Wert (value) des output-Elements nicht dar und
  • der IE 11 und älter unterstützt valueAsNumber nicht.

Siehe auch[Bearbeiten]

Referenz[Bearbeiten]