Mehrere Klassennamen in Array ablegen

[Gwunderi]

Hallo zusammen

Möchte mir ein "Wer bin ich?" - Spiel basteln mit Javascript (nicht mit jQuery). Nur ein einfaches mit höchstens vielleicht 20 Namen, für mich als Übung.

Vorgehen:
1. Jedem Namen mehrere Klassen zuweisen (z.B. class="mann wiss")
2. Abfragen: Mann? if ja: Klassenname "mann" in Array ablegen
Nach letzter Frage: Name ausgeben, dem alle im Array abgelegten Klassen zugewiesen sind.

Ist noch völlig unausgegoren, und vielleicht auch nicht die beste Methode, aber meine Frage ist jetzt nur, wie ich ALLE im Array abgelegten Klassennamen holen kann. Es funktioniert bei mir nur wenn im Array nur ein Klassenname steht.

<p class="mann wiss">Albert Einstein</p>
<p class="mann schau">Gregory Peck</p>

<button onMouseUp="sel()">Ausgabe</button>

<script>
var arr = []
function sel()
{arr.push("mann");
arr.push("wiss");
s = document.getElementsByClassName(arr);
for (i=0; i <= s.length; i++)
	{s[i].innerHTML = "tralala";}}
</script>

Habe einfach mal ein Befehl schreibe "tralala" gegeben, um zu sehen, ob es überhaupt funktioniert (auch die if-Anweisung kommt noch). Wenn ich nur einen Namen im Array ablege, z.B. arr.push("mann") funktioniert es, mit mehreren Elementen im Array hingegen nicht.

Wenn ich alert(arr) befehle, gibt es richtig: mann,wiss aus.
Wenn ich in der Klammer ("mann", "wiss") schreibe statt (arr) funktioniert es.

Kennt Ihr eine Möglichkeit, das zu bewerkstelligen?

Danke schon mal im voraus und Grüsslein,
Gwunderi

- - - Aktualisiert - - -

Merke eben, dass meine gar keine gute Idee ist!
Wenn ich folgenden Code eingebe:

<p class="mann wiss">Albert Einstein</p>
<p class="mann schau">Gregory Peck</p>

<button onMouseUp="sel()">Ausgabe</button>

<script>
function sel()
{var s = document.getElementsByClassName("mann","wiss");
for (i=0; i <= s.length; i++)
	{s[i].style.background = "lightgreen";}}
</script>

Dann färbt es mir beide Namen grün, bedeutet also dass es alle Elemente mit class="mann" UND class="wiss" ausliest, nicht nur jene, welchen BEIDE Klassen zugewiesen sind!

Muss also eh eine andere Lösung finden.
Werde aber trotzdem wieder reinschauen, vielleicht brauche ich ja obiges mal für etwas anderes.

Schönen Abend noch allseits : )
Gwunderi

 

[Dormilich]

also mit document.getElementsByClassName() wirst du nichts ausrichten können* (wie der Name schon sagt sucht das nach einem Klassennamen, und akzeptiert weder Arrays noch mehrere Parameter).

aber wozu gibt’s document.querySelector() (bzw. document.querySelectorAll()), da kannst du via CSS-Selektoren (ähnlich wie bei jQuery) suchen.


* - es gilt, im Zweifelsfall (wenn es um die Benutzung einer Funktion geht) nicht wild rumraten, sondern in der Dokumentation nachschlagen (ich empfehle das Mozilla Developer Network, deren JS Doku ist ziemlich gut, die eigentliche Doku ist jedoch (in diesem Fall) die DOM4 spec des W3C)

 

[Gwunderi]

also mit document.getElementsByClassName() wirst du nichts ausrichten können* (wie der Name schon sagt sucht das nach einem Klassennamen, und akzeptiert weder Arrays noch mehrere Parameter).

aber wozu gibt’s document.querySelector() (bzw. document.querySelectorAll()), da kannst du via CSS-Selektoren (ähnlich wie bei jQuery) suchen.

Danke Dir vielmals für Deinen Tipp, hatte noch nie von diesem document.querySelector() und … All() gehört, werde mich also gleich schlau machen.

es gilt, im Zweifelsfall (wenn es um die Benutzung einer Funktion geht) nicht wild rumraten, …

Fühle mich ertappt Zwar nicht immer, aber oft, je nachdem wie ich gerade aufgelegt bin.

Nochmals herzlichen Dank und jetzt schon einen "guten Rutsch"
Gwunderi

 

[Dormilich]

gern geschehen.

Einen Guten Rutsch auch von meiner Seite aus.

PS. hinreichend moderne Browser kennen auch die Property .classList