Signatur
Beschreibung
Die Eigenschaft value von HTMLButtonElement spiegelt das HTML-Attribut value eines <button>-Elements wider. Wer den Wert liest, erhält das Attribut als Zeichenkette. Wer ihn schreibt, ändert das Attribut. Fehlt das Attribut, ist der Rückgabewert "".
Wichtig wird der Wert beim Absenden eines Formulars. Hat ein Absende-Button (type="submit") ein name-Attribut, übermittelt der Browser das Paar name=value mit, und zwar nur für den Button, der das Absenden ausgelöst hat. So kann der Server mehrere Aktionen in einem Formular unterscheiden, etwa „Speichern“ und „Löschen“.
Der Wert ist nicht die Beschriftung des Buttons. Den sichtbaren Text legt der Inhalt des Elements fest (textContent). Anders als bei <input type="button"> ändert sich beim Setzen von value nichts an der Anzeige.
Im Skript eignet sich value gut, um Daten direkt am Button abzulegen, zum Beispiel eine ID oder einen Aktionsnamen. Diese Daten liest man dann in einem gemeinsamen Klick-Handler aus.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Nur beim Schreiben: der neue Wert. Andere Werte werden in eine Zeichenkette umgewandelt, z. B. 42 → "42", null → "null". |
Rückgabewert
value-Attributs oder "", wenn keins gesetzt ist.Beispiele
Wert lesen und setzen
// HTML: <button id="btn" value="speichern">Speichern</button>
const btn = document.querySelector('#btn');
console.log(btn.value);
btn.value = 'entwurf';
console.log(btn.getAttribute('value'));
console.log(btn.textContent); // Beschriftung bleibt gleichEinen Klick-Handler für mehrere Aktionen
// HTML:
// <div id="toolbar">
// <button value="bold">B</button>
// <button value="italic">I</button>
// </div>
const toolbar = document.querySelector('#toolbar');
toolbar.addEventListener('click', (event) => {
const button = event.target.closest('button');
if (!button) return;
console.log(`Aktion: ${button.value}`);
});Welcher Absende-Button wurde geklickt?
// HTML:
// <form id="form">
// <input name="titel" value="Artikel">
// <button name="aktion" value="speichern">Speichern</button>
// <button name="aktion" value="loeschen">Löschen</button>
// </form>
const form = document.querySelector('#form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const { submitter } = event;
// Den Submitter übergeben, damit name=value mit in den Daten landet
const data = new FormData(form, submitter);
console.log(submitter.value, Object.fromEntries(data));
});Zahl im Wert speichern
const btn = document.createElement('button');
btn.value = 7; // wird zu "7"
console.log(typeof btn.value);
const id = Number(btn.value) + 1;
console.log(id);// Wichtig · Fallstricke
- Wert ist nicht Beschriftung: Bei
<button>ändertvalueden angezeigten Text nicht. Dafür isttextContentzuständig. Bei<input type="button">ist es genau umgekehrt, was leicht zu Verwechslungen führt. - Immer eine Zeichenkette: Zahlen und andere Werte werden umgewandelt. Zum Rechnen deshalb explizit mit
Number()umwandeln.btn.value = nullergibt die Zeichenkette"null". Um das Attribut zu entfernen,removeAttribute('value')verwenden. - Übermittlung nur mit
name: Ohnename-Attribut wird der Wert nie gesendet. Mitgeschickt wird nur der Button, der das Absenden ausgelöst hat.new FormData(form)ohne zweites Argument enthält ihn nicht;new FormData(form, submitter)ist neuer (etwa seit 2023 in allen großen Browsern). - Altes IE-Verhalten: Alte Internet-Explorer-Versionen (IE ≤ 7) haben statt
valueden inneren Text übermittelt. In modernen Browsern verhält sich die Eigenschaft überall gleich. - Sicherheit: Ein Button-Wert kommt bei der Übermittlung beliebig veränderbar beim Server an. Man darf ihm dort nicht blind vertrauen, sondern muss ihn wie jede andere Benutzereingabe prüfen.