Ereignisbehandlung mit Klassenlisten in JavaScript

Verstecken eines Dokumententeils

Das folgende Programm erlaubt es, eine Zahl durch Anklicken der sie enthaltenden Klammern ein- oder auszublenden. Dazu wird bei der Behandlung des Klickereignisses eine Klasse umgeschaltet. Durch ein Stilblatt wurde festgelegt, daß Elemente mit dieser Klasse unsichtbar sind.

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
.off { display: none }
</style></head><body>
<h1>Verstecken</h1>
<p>Die folgende Zahl kann durch Anklicken der Klammern ein- oder ausgeblendet werden.</p>
<p><span id="brackets">[<span id="number">0</span>]</span></p>
<pre><code><script>/*<![CDATA[*/
onClick = () => span.classList.toggle( "off" );
span = window.document.getElementById( "number" );
window.document.getElementById( "brackets" ).addEventListener( "click", onClick );
/*]]>*/</script></code></pre></body></html>

Durch »classList.toggle« wird die als Argument angegeben Klasse zum Zielelement (das Element, welches die Eigenschaft »classList« enthält) hinzugefügt, wenn sie bisher nicht zum Zielelement gehörte, oder aus dem Element entfernt, wenn sie bisher dazugehörte.

Durch »classList.add« wird die als Argument angegeben Klasse zum Zielelement hinzugefügt.

Durch »classList.remove« wird die als Argument angegeben Klasse aus dem Zielelement entfernt.

Verstecken eines Dokumententeils

Das folgende Programm zeigt ein kleines Glücksspiel. Beim Laden der Seite wird dafür gesorgt, daß mit 50%iger Wahrscheinlichkeit „Sie haben gewonnen“ erscheint.

(Die Seite kann mit Strg+F5 erneut geladen werden.)

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
.d0 { display: none; }
</style></head><body>
<p>Sie haben <span id="span">nicht</span> gewonnen.</p>
<pre><code><script>/*<![CDATA[*/
window.document.getElementById( "span" ).classList.add( "d" + Math.floor( Math.random() * 2 ))
/*]]>*/</script></code></pre></body></html>

Beim Laden der folgenden Seite wird dafür gesorgt, daß mit 10%iger Wahrscheinlichkeit „Sie haben gewonnen“ erscheint.

main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">
.true  { display: none; }
</style></head><body>
<p>Sie haben <span id="span">nicht</span> gewonnen.</p>
<pre><code><script>/*<![CDATA[*/
window.document.getElementById( "span" ).classList.add( Math.random() * 10 < 1 )
/*]]>*/</script></code></pre></body></html>

Hinweis für den Dozenten ► Der Vergleichsoperator »<« wurde schon behandelt.

Übungsaufgaben

Zur Erleichterung der Bearbeitung können Sie an Stelle von »document.getElementById« auch weiterhin NAOTWO zum Elementzugriff verwenden, oder erst zum Schluß – nachdem die Aufgabe gelöst ist – NAOTWO durch den Einsatz von »document.getElementById« ersetzen.

Zur Erleichterung der Bearbeitung können Sie an Stelle von »addEventListener« auch weiterhin on-Attribute verwenden, also beispielsweise an Stelle von »span.addEventListener( "click", () => span.innerHTML = 1 );« in einem Skript-Element »onclick="span.innerHTML=1"« als Attribut des span-Elements.

Durch NAOTWO (“named access on the window object ”, NAOTWO, sprich “now two ”) werden die im HTML-Quelltext mit »id=« festgelegten Elementkennungen, falls möglich, in JavaScript als globale Namen zur Verfügung gestellt. (Siehe auch: https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object).

Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.

Zur Erleichterung der Bearbeitung können Sie bei Übungsaufgaben in den folgenden Lektionen an Stelle von polyglottem HTML auch weiterhin SIL verwenden. Dabei kann vor den SIL-Code ein style-Element gesetzt werden und hinter den SIL-Code ein script-Element. Die drei leeren Zeilen in dem folgenden SIL-Dokument können jeweils mit CSS -Code, HTML-Code beziehungsweise JavaScript -Code befüllt werden.

Main.html

<style>
</style>
<script>

</script>

Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.

/ Übungsaufgabe

HTML-Quelltext

<p>Hier klicken, um die Farbe des folgenden Absatzes zu aendern!</p>
<p>Lorem ipsum quia dolor sit amet, consectetur, adipisci velit</p>

Versehen Sie den obenstehenden HTML-Quelltext mit Kennungen und kombinieren Sie ihn dann mit ein Stilblatt und mit JavaScript -Quelltext, so daß durch Klicken auf den ersten Absatz die Farbe der Schrift des zweiten Absatzes verändert wird.