Hintergrundfarbe mit button ändern

  • Hallo,

    ich versuche gerade folgendes, trotz langer Internetrecherche bislang ohne Erfolg: einen Button einzubauen, der die Hintergrundfarbe ändert, wenn man ihn anklickt.
    (Am idealsten wäre es, 2 Schalter zu haben, für erste und zweite Hintergrundfarbe (on/off).

    ich habe auch eine Funktion gefunden, mit der das in einem Javascript Editor schön funktioniert:

    <html>
    <body>
    <button id="buttonColor">Change Color</button>
    </body>
    </html>
    ------------------------------------------------
    document.getElementById('buttonColor').addEventListener('click', () =>
    document.body.style.backgroundColor = "blue"
    );


    wenn ich nun dem Button eine id gebe und den js script mittels snippet plugin einbaue, bekomme ich in der konsole die Fehlermeldung: Uncaught TypeError: can't access property "addEventListener", document.getElementById(...) is null

    dafür fehlt mir leider das nötige Javascript Verständnis... jemand vielleicht eine Idee?

    ach ja, mittels alert habe ich überprüft, dass das js aufgerufen wird, das klappt also. die Fehlermeldung bestätigt ja auch, dass was passiert, nur klappt es halt nicht. Die Button id funktioniert auch, ich kann zb mit css den button verändern...

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Zur verlinkten Seite:

    1. Zum Zeitpunkt der Ausführung von [FONT=Courier New]getElementById()[/FONT] im [FONT=Courier New]<head>[/FONT] existiert das DOM des [FONT=Courier New]<body>[/FONT] und somit der gesuchte Button noch gar nicht, also kann man ihm auch kein Click Event anhängen.
    2. Wenn man den Code an das Ende der Seite verlagert bzw. erst nach Erstellung des DOM aufrufen würde, wird es auch nicht funktionieren, weil die ganze Seite derzeit kein Element mit einem [FONT=Courier New]id="button-color2"[/FONT] enthält.
  • Zur verlinkten Seite:

    1. Zum Zeitpunkt der Ausführung von [FONT=Courier New]getElementById()[/FONT] im [FONT=Courier New]<head>[/FONT] existiert das DOM des [FONT=Courier New]<body>[/FONT] und somit der gesuchte Button noch gar nicht, also kann man ihm auch kein Click Event anhängen.
    2. Wenn man den Code an das Ende der Seite verlagert bzw. erst nach Erstellung des DOM aufrufen würde, wird es auch nicht funktionieren, weil die ganze Seite derzeit kein Element mit einem [FONT=Courier New]id="button-color2"[/FONT] enthält.

    1) ah, ja du hast recht, so kann das nicht funktionieren. jetzt verstehe ich das, weil die seite wird ja erst generiert!
    2) zuviel herumgeschrieben. nun stimmt es wieder. wenn ich den script nun in den footer einfüge, klappt es :)

    nun muss ich noch verstehen, wie ich nicht den background des body adressiere, sondern den div mit der id"inner-body". Also den türkisen background.
    Irgendwie mit getElementsByTagName, soviel ich verstehe.

    Und ich möchte ja mehrere buttons haben, also habe ich versucht, statt der id eine Klasse zu verwenden, komischerweise klappt es dann im jsfiddle nicht mehr. Warum, müsste doch egal sein, ob id oder klasse?

  • document.getElementById('button-color').addEventListener('click', () =>
    document.getElementById("inner-body").style.backgroundColor = "blue"
    );

    eine frage gelöst :)

    aber warum mag es die Klassen nicht? das ist mir ein Rätsel...

  • Hier ein Ansatz mit mehreren Buttons mit einer Klasse und einer gemeinsamen Funktion, allerdings auf Basis von jQuery (wird auf Deiner Seite mitgeladen), das ist etwas komfortabler: https://jsfiddle.net/7y0sc3d4/


    VIELEN DANK für deine Hilfe!
    leider bin ich nicht sehr talentiert mit javascript/jQuery, obwohl es total Spaß macht und man so tolle Sachen machen kann :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!