Javascript Button erstellen?
Hallo,
ich habe einen Button in HTML erstellt und möchte, dass dieser per Click, die Farbe eine Textelements in Schwarz ändert. Den Button habe ich erstellt, komme aber bei der Funktion nicht weiter, kann jemand helfen? Danke im Voraus.
<button type="button" onclick=document.getElementById('Liste').style.color = 'black'">Drück mich!</button>
Aktueller Stand
3 Antworten
HTML:
<button class="list-btn" type="button">click me!</button>
<ul class="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
CSS:
.list {
background-color: black;
color: white;
}
.list.active {
background-color: white;
color: black;
}
JavaScript:
const myList = document.querySelector('.list');
const myListBtn = document.querySelector('.list-btn');
myListBtn.addEventListener('click', function(){
myList.classList.toggle('active');
});
Bei jedem Klick wird nachgeschaut, ob die Liste eine Klasse active besitzt. Wenn ja, wird diese entfernt. Wenn nicht, wird sie hinzugefügt. Das Aussehen legst du dann einfach innerhalb von CSS an. Wenn sich der Zustand beim erneuten Klicken nicht ändern soll, einfach add anstelle von toggle verwenden.
myListBtn.addEventListener('click', function(){
myList.classList.add('active');
});
LG medmonk
Ich würde bei Klick eine Klasse setzen/wegnehmen, und den Stil per Stylesheet setzen. Und das JS in eine Funktion auslagern.
Hier gibt es ein Beispiel: https://www.w3schools.com/howto/howto_js_toggle_class.asp
Was @germanils schreibt ist die schöne und bessere Lösung.
Um aber deinen Button as is zu verwenden musst du noch die Gänsefüßchen zu Beginn des onclick Attribut hinzufügen:
<button type="button" onclick="document.getElementById('Liste').style.color = 'black'">Drück mich!</button>
Am besten weil auch übersichtlicher würde ich eine Funktion in JS machen und diese wird über den Button ausgelöst :)