Zitat-Auswahl
Nun geht es um die tatsächliche Implementierung der Funktionalität deines Zitat-Generators. Dafür musst du Änderungen in deinem HTML- sowie JavaScript-Code machen.
HTML-Code:
- Füge ein Element hinzu, in dem das Zitat angezeigt werden soll, z.B. ein
<p>- oder<div>-Element, und weise ihm eine eindeutige ID oder Klasse zu.
JavaScript-Code:
- Erstelle eine Sammlung von motivierenden oder lustigen Zitaten als Array oder Objekt in deinem JavaScript-Code.
- Erstelle eine Funktion, die zufällig ein Zitat aus der Sammlung auswählt. Alternativ kann sie immer das nächste Zitat aus dem Array auswählen.
- Greife auf das HTML-Element mit der eindeutigen ID oder Klasse zu, um das Zitat darin anzuzeigen.
- Verwende DOM-Manipulation, um das ausgewählte Zitat in das HTML-Element einzufügen oder zu aktualisieren.
Beispiel:
const quotes = [
"Lebe jeden Tag, als wäre es dein letzter.",
"Ein Lächeln ist die beste Medizin.",
"Die Zukunft gehört denen, die an die Schönheit ihrer Träume glauben."
];
function selectQuote() {
// Randomly generate a number between 0 and the length of the quotes array
// Get the quote at the randomly generated index
// displayQuote(quote)
}
function displayQuote(quote) {
// Get reference to quote area
// set textContent of the quote area to quote
}
Dieses Grundgerüst ermöglicht es dir, das Zitat bei jedem Klick auf den Button zufällig auszuwählen und es auf der Webseite anzuzeigen. Du kannst den Code entsprechend deinen Anforderungen anpassen und weitere Funktionalitäten hinzufügen. Die Bereitstellung eines Mechanismus zur Aktualisierung des Zitats vermittelt den grundlegenden Prozess der DOM-Manipulation in JavaScript, um die Dynamik und Interaktivität der Webseite zu verbessern.