Lernen Herausforderung: Verwaltung von Element-Eigenschaften und -Attributen | DOM-Manipulation für Interaktive Webentwicklung

Aufgabe

Sie arbeiten an einer Produktseite, auf der Produktinformationen angezeigt und den Nutzern ermöglicht wird, den Verfügbarkeitsstatus umzuschalten.

Setzen Sie den Produktnamen auf "Smartphone";
Setzen Sie den Anfangspreis auf "499.99";
Verfügbarkeitsstatus mit Attributen umschalten: Wenn der Button geklickt wird:
- Prüfen, ob das <button>-Element das Attribut data-available besitzt;
- Falls data-available vorhanden ist, entfernen Sie es und aktualisieren Sie den Textinhalt auf "Nicht verfügbar".
- Falls data-available nicht vorhanden ist, fügen Sie es mit dem Wert "true" hinzu und aktualisieren Sie den Textinhalt auf "Verfügbar".
Verfügbarkeitsstatus anzeigen:
- Prüfen, ob das Attribut data-available am Button vorhanden ist;
- Zeigen Sie "Auf Lager" im Element availability-status an, wenn data-available vorhanden ist, oder "Nicht auf Lager", wenn es fehlt.

index.html

index.css

index.js

Verwenden Sie textContent, um den Produktnamen auf "Smartphone" zu setzen;
Verwenden Sie value, um den Anfangspreis auf "499.99" zu setzen.
Verwenden Sie hasAttribute, um zu prüfen, ob das <button>-Element das Attribut data-available besitzt;
Falls data-available vorhanden ist, verwenden Sie removeAttribute, um es zu entfernen, und aktualisieren Sie textContent auf "Unavailable";
Falls data-available nicht vorhanden ist, verwenden Sie setAttribute, um es mit dem Wert "true" hinzuzufügen, und aktualisieren Sie textContent auf "Available".
Verwenden Sie getAttribute, um zu prüfen, ob das Attribut data-available am Button vorhanden ist.

index.html

index.css

index.js

War alles klar?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 8

Fragen Sie AI

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you show me the HTML structure for the product page?

How should the JavaScript function for toggling availability be implemented?

Where should the availability status be displayed on the page?

Completion rate improved to 2.22

Swipe um das Menü anzuzeigen

Sie arbeiten an einer Produktseite, auf der Produktinformationen angezeigt und den Nutzern ermöglicht wird, den Verfügbarkeitsstatus umzuschalten.

Setzen Sie den Produktnamen auf "Smartphone";
Setzen Sie den Anfangspreis auf "499.99";
Verfügbarkeitsstatus mit Attributen umschalten: Wenn der Button geklickt wird:
- Prüfen, ob das <button>-Element das Attribut data-available besitzt;
- Falls data-available vorhanden ist, entfernen Sie es und aktualisieren Sie den Textinhalt auf "Nicht verfügbar".
- Falls data-available nicht vorhanden ist, fügen Sie es mit dem Wert "true" hinzu und aktualisieren Sie den Textinhalt auf "Verfügbar".
Verfügbarkeitsstatus anzeigen:
- Prüfen, ob das Attribut data-available am Button vorhanden ist;
- Zeigen Sie "Auf Lager" im Element availability-status an, wenn data-available vorhanden ist, oder "Nicht auf Lager", wenn es fehlt.

index.html

index.css

index.js

Verwenden Sie textContent, um den Produktnamen auf "Smartphone" zu setzen;
Verwenden Sie value, um den Anfangspreis auf "499.99" zu setzen.
Verwenden Sie hasAttribute, um zu prüfen, ob das <button>-Element das Attribut data-available besitzt;
Falls data-available vorhanden ist, verwenden Sie removeAttribute, um es zu entfernen, und aktualisieren Sie textContent auf "Unavailable";
Falls data-available nicht vorhanden ist, verwenden Sie setAttribute, um es mit dem Wert "true" hinzuzufügen, und aktualisieren Sie textContent auf "Available".
Verwenden Sie getAttribute, um zu prüfen, ob das Attribut data-available am Button vorhanden ist.

index.html

index.css

index.js

War alles klar?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 8