Meine toggleAttribute-Funktion will den alten Wert nicht überschreiben

[borisbaer]

Hallo zusammen,

seltsamerweise möchte meine JS-Funktion den bereits vorgegeben Wert eines Aria-Attributs nicht überschreiben und ich verstehe nicht, woran das liegen könnte:

function toggleAttribute ( el, attr ) {

	el.addEventListener( 'click', function() {

		let value = this.getAttribute( attr );

		if ( value == true )

			value = false;

		else value = true;

		this.setAttribute( attr, value );

	});

}

Wenn ich kein Aria-Attribut beim betreffenden HTML-Element angebe, dann fügt mir die Funktion zwar das Aria-Attribut hinzu, aber es überschreibt dieses beim zweiten Klicken nicht mehr.

Bitte um Hilfe.

Grüße
Boris

[Felix Riesterer]

Lieber borisbaer,

brauchst Du nicht eher "true" anstelle von true? Im Attribut soll doch nicht <i aria-x=""> stehen, sondern <i aria-x="true"> - oder sehe ich das falsch?

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

Ja, Attributwerte sind Strings, nichtleere Strings sind truthy und deswegen ist der Vergleich value==true immer wahr, wenn im Attribut etwas drin steht. Dass ist sicherlich nicht der Sinn der Sache.

Die Zuweisung von booleschen Werten an das Attribut dürfte in einen String konvertiert werden, aber da bin ich nicht 100% sicher, sowas mache ich nie.

Das darf man nicht mit Propertys verwechseln, die Attributwerte widerspiegeln. Zu einem booleschen HTML Attribut wie checked gibt es ein Property checked im DOM, das true oder false ist. Allerdings haben boolesche HTML Attribute auch nicht den Wert true oder false, sondern sind vorhanden oder nicht. Die Aria-Attribute gehen einen anderen Weg, vielleicht, um false und "nicht angegeben" besser unterscheiden zu können.

Rolf

[borisbaer]

Hallo Felix,

brauchst Du nicht eher "true" anstelle von true? Im Attribut soll doch nicht <i aria-x=""> stehen, sondern <i aria-x="true"> - oder sehe ich das falsch?

ja, stimmt. Das war aber nicht das Problem, sondern dass mit eine andere Funktion einen Strich durch die Rechnung gemacht hatte. Insofern hat sich das Problem mittlerweile gelöst!

Grüße
Boris