Wie kann ich einem Button (html, css, javascript) mehrere Funktionen zuweisen?

Hallo Zusammen, ich bin Neuling und möchte einen Button erstellen, welcher drei verschiedene Textfarben von einer Liste ändert. Also die Begriffe in der Liste sind zuerst rot, orange, gelb und sollen nach dem Klick auf einen Button schwarz werden.

Kann mir dabei jemand helfen?

Dabei soll die Formatierung der Textzeilen genau so bleiben:

Danke und liebe Grüße

Answer 1

[Destranix]

Weise die Farben über Klassen zu.

Füge dem Knopf einen Event-Listener hinzu, der auf das Click-Event reagiert. (addEventListener)
Im Listener tust du folgendes:

Frage die Elemente, die du verändern möchtest ab, entweder über die Klasse oder über deren ID oder anderweitig. (beispielsweise getElementById oder getElementsByClassName)
Entferne die bestehende Klasse (classList.remove)und füge eine neue hinzu (classList.add), die ein anderen Style hat.

Comments

[elemie59]

Danke für deine Antwort.

Ich verstehe leider nicht genau, wie das aussehen soll.

Durch meine Recherche habe ich schon mehrere Wege gefunden, Textfarben zu verändern. Allerdings möchte ich in meinem Fall drei verschiedene Farben (rot, orange, gelb) mit einem einzigen Button schwarz färben.

[Destranix]

@elemie59

Am einfachsten ist das, wenn du das CSS so anpasst, dass du durch das hinzufügen einer Klasse bei den Elementen das Aussehen entsprechen ändern kannst.

[VeryBestAnswers]

@elemie59

Du kannst in einem Event Listener beliebig viele Funktionen aufrufen.

myButton.addEventListener("click", () => {
    firstFunction();
    secondFunction();
    thirdFunction();
});

[Destranix]

@VeryBestAnswers

Oder man registriert gleich mehrere Eventlistener. ;-)

[elemie59]

Ich konnte mein Problem nun mittels YT Video lösen. https://www.youtube.com/watch?v=eT_MVOqH5bQ
Natürlich habe ich nicht alles 1:1 übernommen, sondern an meine Aufgabe angepasst.

[Destranix]

@elemie59

Okay, das freut mich für dich.