Hallo, wie kann ich einen Button in HTML/Javascript erstellen, der die Farbe ändert?
Ich möchte einen Button erstellen, der dann die Textfarbe von einer Liste ändert. Also die Begriffe in der Liste sind zuerst rot und sollen nach dem Klick auf einen Button schwarz werden. Geht das?
Ich habe die Schriftfarben mit CSS über eine ID gemacht:
diese 3 Punkte sollen über einen Klick auf einen Button schwarz werden.
4 Antworten
Hey,
natürlich geht das.
Erstmal vergibst du deiner Liste eine id :
<li id=DEINE_ID></li>
Danach kannst du die ID einfach via JS ansprechend und ihre Attribute ändern:
<script>
function listColorChanger(){
document.getElementById(„DEINE_ID“).style.color = „#000000“;
}
</script>
Das ganze wurde verpackt in eine Funktion die mit listColorChanger() angesprochen wird.
Nun zum Button, dieser bekommt den onclick Attribut:
<button onclick=„listColorChanger“></button>
Und das wars.
Mit freundlichen Grüßen,
Nico
Vielen Dank für die Antwort, aber leider funktioniert das bei mir nicht :(
HTML:
<ul class="red-text-color" id="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<button id="change-color-button">change</button>
JavaScript:
const button = document.getElementById("change-color-button");
button.addEventListener("click", () => {
const list = document.getElementById("list");
list.classList.remove("red-text-color");
});
CSS:
.red-text-color {
color: red;
}
Du könntest aber auch die Klassenselektoren austauschen. Schau dir generell das classList-Property an.
Das Prinzip ist relativ einfach. Button und Liste in HTML erstellen, das Event des Klicks auf den Button mittels JavaScript anfangen und dann wie gewünscht bearbeiten. Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>getElementById Beispiel</title>
</head>
<body>
<p id="para1">Irgendein Text</p>
<button onclick="changeColor('blue');">Blau</button>
<button onclick="changeColor('red');">Rot</button>
</body>
<script>
function changeColor(newColor) {
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
</script>
</html>
Hast du mal in der Console deines Browser nachgesehen ob JavaScript eine Fehlermeldung wirft? Du kannst in deinem JavaScript auch mit dem der Anweisung "debugger", einfach einen Breakpoint setzen und deinen Code dann Schritt für Schritt zur Laufzeit analysieren. Bspw.:
function changeColor(newColor) {
debugger;
var elem = document.getElementById("para1");
elem.style.color = newColor;
}
Damit pausiert er die Ausführung deines JavaScripts an der Stelle und du kannst mit den Entwickler-Tools deines Browsers bspw. Variablen Inhalte prüfen ob alles arbeitet, wie erwartet, um deinen Fehler zu finden.
Das kommt ganz darauf an wie/wo du die Farben definiert hast.
Ich nehme an du hast eine Liste in Form eines <ul> Elements mit <li> Elementen? Mit welchem CSS Selektor hast du die Farben gesetzt? Oder arbeitest du mit Inline-Styles? Wenn du die Farbe an die li-Elemente gesetzt hast, wirst du hier jedes einzelne ansprechen müssen, oder überschreibst generell die font-color aller li-Elemente mit einem "!important"-Statement was generell nicht zu empfehlen ist, aber in dem ein oder anderen Fall schon sinnig sein kann.
Du musst deine li Elemente irgendwann wieder mit </li> schließen. Auch das em wie das b Element müssen geschlossen werden bzw. das b-Tag ist veraltet und wird durch strong ersetzt. Auch benötigst du die span Elemente nicht unbedingt - kommt darauf an was du willst. Willst du die Aufzälungszeichen mit einfärben? Dann kannst du die color an das li-Element setzen, wenn nicht dann benötigst du das span-Tag, solltest aber die Farbe nicht mehr am li Element setzen.
Ich hab dir das mal aufgezeigt.
<ul>
<li><span style="color: red;"><em>rot</em></span></li>
<li><span style="color: orange;"><strong>orange</strong></span></li>
<li><span style="color: yellow;">gelb</span></li>
</ul>
Das JavaScript dazu könnte wie folgt aussehen..
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById("color-changer").addEventListener('click', function () {
document.querySelectorAll('li span').forEach(e => e.style.color = "black");
});
});
Habe das hier mal für dich auf einer Spielwiese zusammen gesetzt damit du hier testen kannst. Für solche Kleinigkeiten eignet sich jsfiddle ideal.
Du musst deine li Elemente irgendwann wieder mit </li> schließen.
Nein, der Endtag kann hier weggelassen werden.
(...) bzw. das b-Tag ist veraltet und wird durch strong ersetzt.
Der Tag ist nicht veraltet. Ob er ersetzt werden sollte, muss anhand der Bedeutung des Texts festgelegt werden. Er wird zwar hervorgehoben, jedoch nicht in seinem Rang / der Wichtigkeit. Ein klassisches Anwendungsbeispiel wäre ein Fachbegriff in einem Text, der fett geschrieben wird, um darauf hinzuweisen, dass es ein Fachbegriff / Eigenname / o.ä. ist - jedoch ohne Texthierarchisierung (es ist bspw. keine Überschrift).
Mit strong würde dem Text eine besondere Wichtigkeit zugeordnet werden (z.B. für einen Warntext). Bei dem em wird eigentlich ebenfalls eine gewisse Betonung auf den markierten Text gelegt (Bsp.: Do it now! oder Yes, we can!).
Ich würde im Fall des FS auf b, em, etc. verzichten und die Styles über CSS lösen. Dafür kann auch ruhig das span-Element verwendet werden.
<ul>
<li><span style="color: red; font-style: italic">rot</span>
<li><span style="color: orange; font-weight: bold">orange</span>
<li><span style="color: yellow;">gelb</span>
</ul>
z.b.
https://jsfiddle.net/mkzq67rg/
<ul>
<li>thomas</li>
<li>ingo</li>
</ul>
<button onclick="wechsel()">
neuefarbe
</button>
<script>
function wechsel() {
const myNodelist = document.querySelectorAll('ul>li');
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
}
</script>
an z.b. einer liste von farben kannste ja noch arbeiten .
so ähnlich habe ich es auch schon versucht aber leider passiert nichts