Farbändern mit Java Script?
Hi Leute,
Vor meinem Webdevelopment-Kurs habe ich eine Aufgabe bekommen, die ich teils gelöst und teils nicht habe.
Der Teil, den ich nicht lösen konnte, war, dass der gesamte Inhalt vom Browser (in meinem Fall (Google Chrome) schwarz werden soll, sobald ich auf den Button drücke. Das müsste man mit Java Script machen, wovon ich keine Ahnung habe. HTML und CSS von der Aufgabe sind vorhanden.
Danke für eure Mühe im Voraus
NeueWelt100
1 Antwort
Du kannst die Farbe auf unterschiedliche Weise ändern. Du schreibst dafür innerhalb von JavaScript eine Funktion, die entweder einen Farbwert resp. eine CSS Regel mit diesem Farbwert übergibt oder du fügst lediglich eine CSS Klasse hinzu, sobald ein Event ausgeführt wird. Letzteres z.B. beim Klick auf einen Button.
HTML:
<button onclick="changeColor('#box')">Change Color</button>
<div id="box">Some Content here...</div>
CSS:
.clicked {
background-color: blue;
color: white;
}
JavaScript:
const changeColor = (e) => {
let el = document.querySelector(e);
el.classList.add("clicked");
}
// Alternativ:
function changeToBlack(e) {
let el = document.querySelector(e);
el.style.backgroundColor = "black";
}
LG medmonk
nochmal danke.
Also mein Problem ist, dass ich einen Button einbaue, sobald ich auf den Button drücke, wird der Inhalt vom Browser "schwarz". Java Script habe ich nicht dargestellt.
VG
HTML
<html>
<head>
</head>
<body>
<h1>Farben</h1>
<div>
<ol>
<li id="blau">blau
<li id="pink">pink
</ol>
</div>
<h2>Sonnenfarben</h2>
<div id="Position">
<ul>
<li id="rot">rot
<li id="orange">orange
<li id="gelb">gelb
</ul>
</div>
<div>
<ol start="3">
<li id="braun">braun
<li id="grau">grau
</ol>
<d>
<h3>Grüntöne</h3>
<div>
<ol class="Roman">
<li id="teal">teal
<li id="limegreen">limegreen
<li id="green">green
</ol>
</div>
</body>
</html>
CSS
h1, h3{
padding-left: 40px
}
#blau {
color: blue;
font-weight: bold;
}
#pink {
color: pink;
font-weight: bold;
}
h2{
padding-left: 70px
}
#rot {
color: red;
font-weight: bold;
list-style-type: circle;
}
#orange {
color: orange;
font-style: italic;
list-style-type: circle;
}
#gelb {
color: yellow;
font-style: italic;
list-style-type: circle;
}
div {
font-size: 20px
}
#Position{
padding-left: 30px
}
#braun{
color: brown
}
#grau {
color: grey;
font-weight: bold;
}
#teal {
color: teal;
}
#limegreen {
color: limegreen;
}
#green {
color: green;
font-weight: bold;
}
.Roman{
list-style-type: upper-roman;
}
.schwarz{
background-color: schwarz
}
Wenn du in CSS Farben nicht als hexadezimale Notation, sondern über dessen Namen angeben möchtest, müssen diese in Englisch notiert werden. Das solltest du dir möglichst auch für IDs und Klassen-Namen angewöhnen.
/* Deine Schreibweise (falsch) */
.schwarz { background-color: schwarz; }
/* Korregierte Schreibweise */
.schwarz { background-color: black; }
/* besser */
.black { background-color: black; }
Die Funktion zum Färben habe ich dir ja bereits oben geschrieben. Hier nochmal in veränderter Form, um es an dein CSS anzupassen.
const changeColor = (e) => {
let el = document.querySelector(e);
el.classList.add("black");
}
// Alternativ mit style in JavaScript
const changeToBlack = (e) => {
let el = document.querySelector(e);
el.style.backgroundColor = "black";
}
In deinem HTML benötigt du jetzt noch ein Element (z.B.), mit dem die gewünschte Funktion ausgeführt und auf ein anderes Element angewendet wird. Siehe oben das Beispiel mit dem Button und dem <div> mit der ID box.
Ich habe den Quellcode auch oben aktualisiert.
Hi medmonk,
Konntest du eine Lösung zu meinem Problem finden?
Da wäre sehr nett. Ich habe deinen vorherigen Vorschlag angewendet. Leider hat es nicht geklappt. Schade eigentlich. Würdest du bitte, wenn es dir nichts ausmacht, deine Lösung in mein HTML und CSS schreiben. Das wäre sehr nett.
Vielen Dank für deine Mühe.
Viele Grüße
NeueWelt100
Hi medmonk,
deine veränderte Version habe ich erst zu spät gesehen. Entschuldigung bitte.
VG
Hi medmonk,
es hat auch leider nicht geklappt. Ich glaube, dass ich etwas übersehe. Was ich aber übersehe, weiß ich nicht, ehrlich gesagt.
Ich habe Folgendes gemacht:
Dieses habe ich in HTML ganz unten vor dem </body> -Tag geschrieben
1) <button onclick="changeColor('#box')">Change Color</button>
<div id="box">Some Content here...</div>
Dieses habe in in JS-Sheet geschrieben:
2) const changeColor = (e) => {
let el = document.querySelector(e);
el.classList.add("black");
}
Alternative habe ich auch probiert:
const changeToBlack = (e) => {
let el = document.querySelector(e);
el.style.backgroundColor = "black";
}
Trotzdem hat es nicht funktioniert.
Das Folgende habe ich aus CSS gelöscht, weil es nicht dort hin gehört:
3) .schwarz { background-color: schwarz; }
Also: die Aufgabe ist: ein Button einbauen und darauf drücken, alle Sonnenfarben in black umwandeln.
Vielleicht ein letzter Versuch.......
VG
NeueWelt100
Hi medmonk,
noch eine letzte Bemerkung:
Es treten folgende Fehlermeldungen, wenn ich deine beiden Java Script Codierungen abwechselnd einsetze:
1) const changeColor = (e) => {
let el = document.querySelector(e);
el.classList.add("black");
}
FEHLERMELDUNG in JS-Sheet: "Uncaught Typecolor: Cannot read properties of null (reading `classList`)
2) const changeToBlack = (e) => {
let el = document.querySelector(e);
el.style.backgroundColor = "black";
}
FEHLERMELDUNG in JS-Sheet: Uncaught ReferenceError: changeColor is not defined
Es müsste eigentlich daran liegen, warum es bei mir nicht funktionierte.
Fehler beheben???? Ich habe keine Ahnung.
VG
Du musst die Funktionen an dein Projekt anpassen, indem du den passenden Parameter übergibst und einen Button hinzufügst, um die Funktion aufzurufen.
HTML:
<button onclick="paintItBlack()">Paint it Black</button>
JavaScript:
const paintItBlack = () => {
// Select all elements
let el = document.querySelector('*');
// Set background-color for all elements to black
el.style.backgroundColor = "black";
}
Sobald jemand auf den Button „Paint it Black“ klickt, wird jedem Element die Hintergrundfarbe schwarz zugewiesen.
Hi medmonk,
vielen Dank für deine schnelle Antwort.
Kann ich dir meine HTML und CSS schicken?
Viele Grüße