JS mehrere Button(gleiche klassen) nur der erste betätig bar?
Hallo zusammen,
anbei ein Foto. Wenn ich auf den Button "Note hinzufügen" klicke, reagiert immer nur der obere. Die neu erstellen(die darauf folgenden) reagieren nicht. Alle haben die gleiche CSS-Class. Untendrunter noch der Code-Schnipsel. Woran könnte das liegen ?
Mfg.
Emre
3 Antworten
Hier noch mal ein Variante, die in etwa dem entsprechen sollte, was du möchtest. Statt deinem innerHTML nutze ich hier da TEMPLATE-Element, welches für so was besser geeignet ist.
https://jsfiddle.net/Babelfisch/kvzfam24/38/
HTML
<div class="button-wrapper">
<input id="subject-text" name="subject" type="text" placeholder="Fach" value="Schulfach">
<button id="add-subject">Fach hinzufügen</button>
<div class="marks"></div>
</div>
<template id="subject-template">
<div class="subject-wrapper">
<table>
<thead>
<tr>
<th>Fach</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input name="mark" type="text" placeholder="Note">
</td>
</tr>
</tbody>
</table>
<button class="add-mark">Note hinzufügen</button>
</div>
</template>
Javascript
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("add-subject").addEventListener("click", () => {
let subjectText = document.getElementById("subject-text").value;
let template = document.querySelector('template').content.cloneNode(true);
template.querySelector("thead tr th").textContent = subjectText;
template.querySelector("button").addEventListener("click", (e) => {
let row = e.target.parentNode.querySelector("tbody tr").cloneNode(true);
row.querySelector("input").value = "";
e.target.parentNode.querySelector("tbody").appendChild(row);
});
document.querySelector(".marks").appendChild(template);
});
});
Hey,
nochmals vielen Dank. Ich bin paar Tage nach deiner Antwort in den Urlaub geflogen und habe es dort nochmal bearbeitet und seid paar tagen funktioniert es. Dankeschön. Weil ich deine Antworten als auch deine Hilfsbereitschaft so gut fande, wollte ich fragen, ob du mir wieder helfen könntest. Ich stecke wieder in einer Sackgasse. Ich habe die Frage auf meinem Profil gestellt. Ich wäre Dir sehr dankbar!
Die Anweisung
document.querySelector(".addrow")
sucht stets nach dem ersten Vorkommen des Elements innerhalb deines Dokuments. Das wäre logischerweise immer nur dein erster Button.
Ich gehe davon aus, dass du die Buttons allesamt dynamisch generierst, so wie du es schon beiden Eingabefeldern tust. Wenn du also einen solchen neuen Button erstellst, solltest du ihm auch direkt den entsprechenden Event Handler zuordnen.
const button = document.createElement("button");
button.textContent = "Note hinzufügen";
button.addEventListener(evt => { /* ... */ });
Achte dabei auch darauf, dass sich dein Code je nach Kontext immer auf die richtigen Elemente bezieht, denen irgendein Knoten angehängt werden soll. Als Ausgang wäre der Elternknoten (parentElement) des Button vorzuziehen oder du verwendest einen Selektor, der stets die letzte Box heraussucht (sofern du neue Boxen immer nur an das Ende anhängst).
Dieser Selektor würde das letzte tr-Element in der Tabelle finden:
table > tr:last-child
Als ganz simples Beispiel geht das so:
https://jsfiddle.net/Babelfisch/r78xs9p5/8/
HTML
<div class="note">
<ul>
<li>Note</li>
</ul>
<button class="add">Note hinzufügen</button>
</div>
Javascript
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".note .add").forEach((button) => {
button.addEventListener("click", () => {
let item = document.createElement("li");
item.textContent = "Neue Note";
button.parentNode.querySelector("ul").appendChild(item);
});
});
});
Hey,erstmal vielen Dank für deine Hilfe. Jedoch habe ich dann immer noch das Problem, dass es nur zu dem oberem hinzufügt. Egal auf welchen Button ich drücke. Sei's oben oder unten. Wenn ich sogar oben drauf drücke, wird die Anzahl von den Fächern hinzugefügt. Jetzt in dem Fall zwei. Ich kann leider kein Bild hinzufügen. Hier:https://jsfiddle.net/q6vepz0g/ der Code. Füg es am Besten bei Dir mal ein, dann verstehst du vielleicht mein Problem besser. Ps. Klick sobald du das erste fach erstellt hast das schonmal an, damit es geöffnet ist. Da gibt es auch ein Bug. es öffnet alle 2.
Ich wäre Dir unfasbar Dankbar, wenn du mir helfen könntest:)
Emre
Du siehst an meinem Beispiel, dass das funktioniert. Nimm das einfach als Ausgangspunkt.
Mein Beispiel bezieht sich aber auf bestehende Elemente. Wie regex9 schon schreibt, musst du bei dynamisch hinzugefügten Elementen dann den EventListener direkt beim Erstellen schon setzen.
Dein Code hilft hier leider nicht, da daraus gar nicht hervorgeht, was du überhaupt machen willst.
Bei mir funktioniert dein Code gar nicht. Aber gleich noch ein Tipp: Wenn du den Button über innerHTML und fertiges Markup setzt, kann es nicht funktioniert. Für so einen Button wird dann kein EventListener gesetzt. Füge Buttons immer mit createElement() hinzu und setzte dann direkt den EventListener für den neuen Button.
Hier mal das JS. Hier habe ich doch dem Button den Event Listener gegeben, oder?
notehinzufuegenbutton() {
document.querySelectorAll(".content .addrow").forEach((button) => {
button.addEventListener("click", () => {
let tr = document.createElement("tr");
tr.innerHTML = ` <td>
<input id="noten" type="text"/>
</td>`
button.parentNode.querySelector("table").appendChild(tr);
console.log(button);
console.log(document.querySelectorAll("#noten"));
});
});
Hier das HTML(erzeugt mit JS): Hier wird ganz am Ende der Button hinzugefügt.
htmlContent() {
return ` <table>
<tr>
<th>
Note
</th>
</tr>
<tr>
<td>
<input id="noten" type="text"/>
</td>
</tr>
</table>
<button class ="addrow">Note hinzufügen</button>
`
}
}
Ah ok ich probiere es mal so. BTW ich es öffne es immer mit einem Server
Wie ich dir schon schrieb, funktioniert das mit innerHTML nicht oder nur sehr schlecht. Lass das einfach!
Hier noch ein einfaches Beispiel, was das von dir gewünschte macht.
https://jsfiddle.net/Babelfisch/kvzfam24/35/
Ich poste den Quellcode noch mal direkt in einer neuen Antwort, weil das sonst in den Kommentaren untergeht. Bitte also in der neuen Antwort antworten.
Hey,
erstmal vielen Dank. Ich probiere jetzt schon die ganze Zeit ein Bug zu fixen. Ich glaube es gibt Probleme mit dem Template. Wenn ich auf fach hinzufügen klicke(in dem collapsible) passiert nichts. Und wenn ich das Fach hinzufügen entferne, passiert genauso nix. Da lässt sich das collapsible nichtmal öffnen, bzw. es steht da, dass es geöffnet ist, jedoch wird nichts angezeigt. Ich wollte dich nicht nerven und auch mein Projekt nicht dich coden lassen, jedoch stehe ich auf dem Schlauch. Die console spuckt auch nix aus. Hier mal die komplette Datei: https://drive.google.com/drive/folders/1HpQBGta0XYRZXhdJ5EY9_rfBBkc3PTh6?usp=sharing