Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellenHier 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 :)
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...
Zur verlinkten Seite:
- 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.
- 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?
Link zur Seite auf der das Snippet eingebaut ist und diese Meldung in der Konsole erscheint?
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?
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...
