LU08.A02 - Methode: getElementbyClassname
Rahmenbedingungen
- Sozialform: individual
- Hilfsmittel:
- Open books
- Zeit: 20 Minuten
- Erwartetes Resultat: Ein JavaScript-File, das Zugriff auf HTML-Objekte Elemente mittels der HTML-DOM-Methode getElementbyTagname ermöglicht.
Ausgangslage
Sie finden den nachfolgend Quellcode, der Zugriff auf HTML-Elemente via der Methoden getElementByTagName durchführt.
Der Quellcode ist hier downloadbar: lu08_a03_vorlage_getelementbytagname.zip
Auftrag
Erweitern Sie die bestehende HTML-/JavaScript-Seite, welche aktuell Texte mittels getElementsByTagName() verändert, um folgende Funktionen:
- Legen Sie ein Array mit einer passenden Anzahl von Früchen an.
- Die aktuelen Default Texte sollen bei Knopdruck die Methode machEtwas aufgerufen werden, sodass neu Ich liebe … und der Früchtename erscheint.
- Hinweise:
- Die Anzahl Früchte im Array muss der zu anzeigenden Anzahl von Texten entsprechen.
- Zugriff auf die Arrayelemente erhalten Sie über eine zusätzlichen Index i, der in der Schleife inkrementiert wird (um eines hochgezählt durch i++)
- Den neuen Text dynamisch anpassen können Sie durch diese Zeile durchf^ühren item.innerHTML = `Ich liebe ${fruechte[i]}`;
Zielzustand
