Daten in Elementen

Manchmal muss ein Element eine Information tragen, die nicht sein Text ist. Ein Button sagt Meer, aber dein Code braucht die Farbe dazu. Dafür gibt es in HTML Daten-Attribute: Attribute, deren Name mit data- beginnt, gefolgt von einem Namen, den du selbst wählst:

<button id="meer" data-farbe="teal">Meer</button>
<button id="sonne" data-farbe="orange">Sonne</button>

Der Browser macht damit nichts; sie sind für dein Skript da. JavaScript findet sie in der Eigenschaft dataset des Elements, unter ihrem Namen ohne data-:

const meerButton = document.querySelector("#meer");
console.log(meerButton.dataset.farbe);

teal

Zusammen mit event.target bekommst du so einen Handler für viele Buttons, bei dem jeder Button selbst sagt, was passieren soll:

const titel = document.querySelector("h1");
const meerButton = document.querySelector("#meer");
const sonneButton = document.querySelector("#sonne");

function einfaerben(event) {
    titel.style.color = event.target.dataset.farbe;
}

meerButton.addEventListener("click", einfaerben);
sonneButton.addEventListener("click", einfaerben);

Ein Klick auf Meer färbt die Überschrift blaugrün, und ein Klick auf Sonne färbt sie orange. Eine weitere Farbe ist einfach ein weiterer Button im HTML mit seinem eigenen data-farbe.

Noch ein paar Dinge zu Daten-Attributen:

• Ein Name aus mehreren Wörtern, die mit Bindestrichen geschrieben werden, steht in dataset in camelCase, wie bei style: data-start-zeit ist dataset.startZeit.
• Der Wert ist immer Text. Um mit data-preis="25" zu rechnen, mache daraus eine Zahl: Number(button.dataset.preis).
• Wenn das Element das Attribut nicht hat, bekommst du undefined.
• JavaScript kann Daten-Attribute auch setzen: eintrag.dataset.id = 7; gibt dem Element data-id="7". Das ist praktisch für Elemente, die dein Skript erzeugt.