JS : mit onclick Farbe eines Elements ändern?
Hallo,
(der Titel der Frage mag etwas komisch klingen, aber ich wusste nicht wie ich es sonst noch formulieren soll)
ich habe mal wieder ein Problem.
Ich habe Code geschrieben, der ein Array "visualisiert" bzw. es in eine HTML Liste einfügt, nun möchte ich, dass beim klicken auf ein Element sich die Farbe des Elements ändert und zusätzlich noch anderer Code ausgeführt wird.
Mein Problem :
Ich weiß nicht welches Element geklickt wurde. Ich füge ja ein Array in eine Liste ein, unzwar immer nach der gleichen "Vorlage", danach füge ich noch Klassen hinzu und muss eben auch das onlick mit JS hinzufügen.
Es klingt hier alles sehr komisch, aber ich weiß nicht wie ich es besser erklären soll.
Ich habe nochmal einen Kommentar an der onclick stelle geschrieben.
Ich finde keine Lösung, die es möglich mach, dass man unendlich viele Elemente mit push zum Array hinzufügen kann, diese dann wieder in die Liste einfügt und es trotzdem möglich ist, dass bestimmter Code ausgeführt wird
Wer es nicht verstanden hat, ich habe auch Discord zur Not könnte ich auch versuchen es mündlich zu erklären, wie ich es meine. (schriftlich ist grade bisschen schwer)
Danke für jede Antwort.
Ich bin gerade am verzweifeln
Bei Fragen einfach Nachfragen. Gebe auch meinen Discord Namen raus, dann kann ich das mündlich erklären
Bitte poste relevanten Code in deiner Frage und keine Screenshots.
Dann musst du dir nur die Funktion load_array ansehen. Der Rest gehört zu was anderem
Ich sehe mir Quellcode gerne an. Screenshots sind aber kein Quellcode.
Ich kann wenn ich morgen Zeit habe, denn Quelcode hier rein schicken
1 Antwort
Das event-Objekt beinhaltet Informationen darüber, welches Element angeklickt und an welches Element der Handler gebunden wurde.
someElement.addEventListener("click", evt => {
const clickedElement = evt.target;
const elementToWhichTheEventWasBound = evt.currentTarget;
/* do something ... */
});
Zusätzlich könntest du deinen Elementen data-Attribute zuordnen, um sie zu identifizeren.
Beispiel:
<!doctype html>
<title>Example</title>
<ul>
<li data-id="Leo">Lion
<li data-id="Odie">Dog
<li data-id="Gulliver">Crow
</ul>
<script>
const items = document.querySelectorAll("[data-id]");
for (const item of items) {
item.addEventListener("click", evt => {
console.log(evt.currentTarget.dataset.id);
});
}
</script>
Das obige Beispiel erweitert fügt dem angeklickten Element eine bestimmte Farbe zu.
<!-- ... -->
<style>
.highlight { background-color: orange }
</style>
<!-- ... -->
<script>
/* ... */
item.addEventListener("click", evt => {
const element = evt.currentTarget;
element.classList.add("highlight");
console.log(element.dataset.id);
});
}
</script>
Statt eine CSS-Klasse hinzuzufügen, kann man auch direkt über das style-Property Styles ändern.
element.style.backgroundColor = "orange";
Danke. Ich habe leider heute Abend keine Zeit mehr mir das genau anzusehen. Aber ich werde morgen nochmal alles probieren dieses Problem zu lösen unteranderem mit deinen sehr hilfreichen Antworten
Dabei für deine Antwort, aber sie richtig beantwortet es nicht meine Frage. Weißt du wie es möglich wäre es konrekt mit dem Beispiel der Farbe umzusetzten. (Zur Data Id die Elemte bekommen jeweils, wie du aus dem Code entlesen kannst Klassen)