1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Hintergrundfarbe mit button ändern

Dieses Thema im Forum "Design" wurde erstellt von lalofeee, 12. Mai 2021.

Schlagworte:
  1. lalofeee

    lalofeee Member

    Registriert seit:
    16. November 2020
    Beiträge:
    5
    Zustimmungen:
    0
    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...
     
    #1 lalofeee, 12. Mai 2021
  2. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.678
    Zustimmungen:
    1.786
    Link zur Seite auf der das Snippet eingebaut ist und diese Meldung in der Konsole erscheint?
     
    #2 b3317133, 12. Mai 2021
  3. lalofeee

    lalofeee Member

    Registriert seit:
    16. November 2020
    Beiträge:
    5
    Zustimmungen:
    0
    http://portfolio.polypixx.net/portfolio/foto-retusche/#

    mir ist noch ein Detail aufgefallen, es geht nämlich um die background-color des "inner-body" div´s. wie man den adressiert, wüsste ich jetzt auch nicht?
     
    #3 lalofeee, 12. Mai 2021
  4. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.678
    Zustimmungen:
    1.786
    Zur verlinkten Seite:
    1. Zum Zeitpunkt der Ausführung von getElementById() im <head> existiert das DOM des <body> 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 id="button-color2" enthält.
     
    #4 b3317133, 12. Mai 2021
  5. lalofeee

    lalofeee Member

    Registriert seit:
    16. November 2020
    Beiträge:
    5
    Zustimmungen:
    0
    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?
     
    #5 lalofeee, 12. Mai 2021
  6. lalofeee

    lalofeee Member

    Registriert seit:
    16. November 2020
    Beiträge:
    5
    Zustimmungen:
    0
    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...
     
    #6 lalofeee, 12. Mai 2021
  7. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.678
    Zustimmungen:
    1.786
    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/
     
    #7 b3317133, 12. Mai 2021
  8. lalofeee

    lalofeee Member

    Registriert seit:
    16. November 2020
    Beiträge:
    5
    Zustimmungen:
    0
    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 :)
     
    #8 lalofeee, 13. Mai 2021
(Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können. )
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Akzeptieren Weitere Informationen...
    Information ausblenden