html-Elemente mit Werten belegen (Fantasieattribute)

[Gunnar Bittersmann]

@@*Alex*:

nuqneH

<button type="button" id="2" …>

Dass IDs in HTML 4/XHTML 1 nicht mit einer Ziffer beginnen dürfen, ist dir bewusst?

document.getElementById(nummer).style.backgroundColor = "#00ff00";

„Was hingegen schwer ist, ist in die Köpfe der Menschen zu bringen, dass Layout-Informationen *in den CSS-Code* gehören, *nicht* in den JavaScript-Code. JavaScript ist wunderbar geeignet, die DOM-Objekte auf eine Weise zu verändern, die in CSS genutzt werden kann.“ [Cheatah]

Und du änderst ja sowieso DOM-Elemente.

Also bspw. mit <button type="button" id="2" name="nein" data-wert="auswählen" …>:

if (document.getElementById(nummer).dataset.wert == "auswählen")  
{  
        document.getElementById(nummer).dataset.wert = "abwählen";  
}  
else  
{  
        document.getElementById(nummer).dataset.wert = "auswählen";  
}

Ähm nein, das können wir besser:

var element = document.getElementById(nummer);  
  
element.dataset.wert = (element.dataset.wert == "auswählen") ? "abwählen" : "auswählen";

(Für Browser, die dataset noch nicht unterstützen, Alternative mit setAttribute() implmentieren. Oder Klassen statt data-Attribute verwenden.)

Im Stylesheet ist die jeweilige Farbe für beide Zustände angegeben:

[data-wert="auswählen"] { background-color: "#004f00" }  
[data-wert="abwählen"]  { background-color: "#00ff00" }

Ich bin mir aber nicht sicher, ob eine Farbänderung ausreicht, um die unterschiedlichen Zustände zu kennzeichnen. Warum änderst du nicht die Beschriftung der Buttons? Oder ergänzt diese um ein je nach Zustand verschiedenes Icon (kann eine Hintergrundgrafik sein)?

Qapla'