Ankündigung

Einklappen
Keine Ankündigung bisher.

addEventListener in for-Schleife

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • estebu
    hat ein Thema erstellt addEventListener in for-Schleife.

    addEventListener in for-Schleife

    Hallo Gemeinde,

    ich sitze seit Tagen an einem Problem, welches für die Profis unter euch wahrscheinlich kein Problem darstellt. Ich komme aber mittlerweile nicht mehr weiter. Folgende Ausgangslage:
    Ich hole meine Daten (matches) per JSON bzw. werden sie als eine JSON-Datei geliefert. Nun habe ich ein Autocomplete-Feld, welches die Daten filtert.
    Soweit funktioniert auch alles super und die Ergebnisse werden per HTML in einer <ul><li> - Liste unter dem Autocomplete-Eingabefeld angezeigt.
    Nun möchte ich aber, dass etwas passiert, wenn ich dann einen dieser Einträge anklicke. Mein Ansatz:

    Code:
    // Liste erstellen
    const outputHtml = matches => {
        var html = "";
        for (i = 0; i < matches.length; i++) {
            html += "<li id='selectSchool"+matches[i].schul_id+"' class='ac_results'>";
            html += matches[i].name + ", " + matches[i].strasse + ", " + matches[i].plz + " " + matches[i].ort + " (" + matches[i].schul_id + ")";
            html += "</li>";
    
    //nun vergebe ich jedem Listeneintrag eine eigene ID:
    var x = document.getElementById("selectSchool"+matches[i].schul_id+"");
    console.log(x);
            }
            matchList.innerHTML = html;
    };
    //klappt bis hier wunderbar
    Jetzt möchte ich aber einen Eventlistener pro angezeigtem Listeneintrag einfügen:

    Code:
    if (matches[i] !==null) {x.addEventListener("click", function(){innerHTML += "Angeklickt!<br>"});}
    Das Ergebnis: Es gibt zwar eine Reaktion des Browsers, aber nicht die gewünschte. Es wird nicht (wie ich erwartet hatte) im angeklickten Listeneintrag "Angeklickt!" ausgegeben, sondern immer ein oder zwei Zeilen darunter und dann aber gleich 10x oder noch mehr direkt untereinander. In der Konsole kann ich auch sehen, wie vorher eine Menge Datensätze offenbar bei jedem Klick durchlaufen werden (in der JSON Datei sind ca. 800 Datensätze)

    Hat jemand vielleicht einen Hinweis, woran es haken könnte?

    Vielen Dank für Eure Zeit.

  • estebu
    antwortet
    Das hat leider alles nichts gebracht, da var x bei jedem Durchlauf wieder überschrieben und (logischerweise) letztendlich immer nur die Daten des letzten Durchlaufes übrig bleiben. Ich habe jetzt eine fertige Bibliothek benutzt. http://easyautocomplete.com/
    Danke für eure Hinweise.

    Einen Kommentar schreiben:


  • drsoong
    antwortet
    Sehe gerade, dass Du mit "nativem" Javascript querySelectorAll nutzen musst: https://www.w3schools.com/jsref/met_...electorall.asp

    Sorry wegen der Konfusion, ich mache das nach wie vor mit jQuery, wo man bei der Methode nicht unterscheiden muss...

    Einen Kommentar schreiben:


  • drsoong
    antwortet
    Was spricht dagegen, die Liste erstmal zu erstellen? Wenn die dann vollständig ist, kannst Du doch per querySelector für alle Listeneinträge auf einmal einen EventListener erstellen, oder?!

    https://www.w3schools.com/jsref/met_...ryselector.asp

    Einen Kommentar schreiben:


  • tomBuilder
    antwortet
    https://de.wikipedia.org/wiki/Profi

    was ja letzlich nur heisst, dass TE jetzt mit Rechnugen zugehagelt wird

    Einen Kommentar schreiben:


  • K313
    antwortet
    ... und schon stehen alle Profis in der Schlange nur um dir zu beweisen, dass sie wirklich Profis sind.

    Einen Kommentar schreiben:


  • tomBuilder
    antwortet
    Zitat von estebu Beitrag anzeigen
    (..) , dass eine Zeile vielleicht falsch positioniert oder eine andere Stelle mit wenig Aufwand korrigiert werden muss, um das Ganze lauffähig zu bekommen. Ist aber offenbar auch für euch Profis grade nicht ganz so einfach, denke ich. Nicht weiter schlimm - einen Versuch war es jedenfalls wert, mal hier zu fragen.
    steht in #2

    Einen Kommentar schreiben:


  • estebu
    antwortet
    Richtig. Habe ich auch dann herausgefunden durch genau diese Vorgehensweise, die du beschreibst. Nur hatte ich in diesem Fall gehofft, dass jemand auf Anhieb sieht, dass eine Zeile vielleicht falsch positioniert oder eine andere Stelle mit wenig Aufwand korrigiert werden muss, um das Ganze lauffähig zu bekommen. Ist aber offenbar auch für euch Profis grade nicht ganz so einfach, denke ich. Nicht weiter schlimm - einen Versuch war es jedenfalls wert, mal hier zu fragen.

    Einen Kommentar schreiben:


  • K313
    antwortet
    man kann nicht etwas selbst basteln ohne Grundkenntnisse in javascript.

    Der Code wurde gar nicht geändert.

    Programiert wird es nicht mit langer Postmatrazen, sondern mit harter Logik und klarer Vorstellung für jeden Zeichen im Code, wofür es da steht und was es da tut.

    Kannst du den Code im Ganzen nich folgen, zerteile und teste ihn Schrit-für-Schrit.
    Gebe harte Werte ein, reduziere die Schleife bis zum einen Element.
    Und so weiter, bis du an der Fehlerhafte stelle kommst.

    Woran der Fehler liegen könnte, wurde schon mal gesagt.

    Einen Kommentar schreiben:


  • estebu
    antwortet
    Was ich nun mittlerweile bemerkt habe ist, dass der angegebene EventListener
    Code:
     x.addEventListener("click", myClickFunction);
    natürlich bei jeder Schleife wieder überschrieben wird und daher am Ende immer den zuletzt erhaltenen Wert enthält. Man kann wahrscheinlich EventlLitsener auch nicht speichern sozusagen, um mehrere davon gleichzeitig nach dem Durchlaufen der Schleife zu haben, befürchte ich? Da liegt wohl auch das Problem. Die HTML-Elemente werden bei jedem Durchlauf erzeugt und im DOM abgebildet und bleiben aber bestehen. Aber ich schätze, man versteht ganz gut, was ich erreichen möchte. Es ist ja der Sinn einer Autocomplete-Funktion auf einer Webseite, dass man sich dann letztendlich für eines der ausgegebenen (und vorher durch das Eintippen gefilterten) Einträge entscheiden möchte, um damit dann weiter zu arbeiten. Wenn ich nun aber die einzelnen Elemente nicht getrennt voneinander ansprechen kann (weil mir einfach das Know-How dazu fehlt), ist das recht frustrierend ... Muss ich wohl doch auf eine fertige Lösung von jQueryUI zurückgreifen... Schade. Ich wollte es mal selbst "basteln". Danke nochmals für eure Hinweise.

    Einen Kommentar schreiben:


  • estebu
    antwortet
    Okay, da hast du natürlich recht - das css und die ausführende Seite fehlen da noch, aber ich dachte nicht, dass sich jemand tatsächlich die Mühe macht, den Code auszuprobieren.
    Hier ist es dann mal komplett:

    Einen Kommentar schreiben:


  • hellbringer
    antwortet
    Zitat von estebu Beitrag anzeigen
    Das stimmt nicht! Ich habe den vollständigen Code bereits gepostet (siehe oben) - habe nur lediglich die Quelle der JSON Daten anonymisiert. Der Code ist durchaus lauffähig und ich habe jetzt keine Lust her, mich ständig zu rechtfertigen.
    Nein, er ist nicht lauffähig. Probier doch den Link aus, den ich gepostet habe und drück auf "Run". Wenn der Code bei dir so läuft, hast du einen Wunder-Browser, der ganz anders funktioniert als jeder andere Browser.

    Einen Kommentar schreiben:


  • tomBuilder
    antwortet
    Zitat von estebu Beitrag anzeigen
    Was ich mittlerweile begriffen habe: auf die Werte aus "match" kann ich nur innerhalb der Schleife zugreifen. Das bedeutet: der EventListener muss auch zwingend innerhalb der Schleife passieren
    nein bedeutet es nicht,
    du setzt den event listener aiuf das parent element, in wechles du die die ganzen elemnte einträgst, in deinem fall ein <ul> </ul> ?) und gut ist, dann kannst du auch den ganzen inhalt drinnen aufbauen wie oft du willst.

    Einen Kommentar schreiben:


  • estebu
    antwortet
    Das stimmt nicht! Ich habe den vollständigen Code bereits gepostet (siehe oben) - habe nur lediglich die Quelle der JSON Daten anonymisiert. Der Code ist durchaus lauffähig und ich habe jetzt keine Lust her, mich ständig zu rechtfertigen. Danke für eure Zeit. Einige Hinweise werde ich mitnehmen.

    Einen Kommentar schreiben:


  • hellbringer
    antwortet
    Zitat von estebu Beitrag anzeigen
    Im Übrigen überschreibe ich mit
    Code:
    innerHTML +=
    nichts, sondern füge es hinzu. Dafür steht ja das + vor dem =
    Ein += baut den kompletten Inhalt neu auf. Das ist auch unter anderem der Grund, warum ich dir geraten habe direkt das DOM zu manipulieren, statt HTML-Code zusammen zu basteln. Aber OK, wenn du das alles einfach ignorierst, dann brauchst du dich nicht wundern, wenn du Probleme hast.

    Zitat von estebu Beitrag anzeigen
    Was ich mittlerweile begriffen habe: auf die Werte aus "match" kann ich nur innerhalb der Schleife zugreifen. Das bedeutet: der EventListener muss auch zwingend innerhalb der Schleife passieren. Mit
    Code:
    if (x !== null)
    umgehe ich die anfänglichen "leeren" ersten Ergebnisse - aber trotzdem "greift" der Listener noch nicht. Theoretisch sollte es gehen, aber aber aber Deswegen bin ich hier und erbitte eure Hilfe.
    Du stellst irgendwelche Annahmen auf, die du dir selber ausdenkst, und ignorierst gleichzeitig alle Ratschläge von erfahrenen Entwicklern. Wie bereits gesagt gehst du einen unnötigen Umweg über HTML-Code, er alles komplizierter und schwerer verständlich macht, und du die Folgen (noch) nicht verstehst. Es wäre wirklich einfacher, wenn du direkt mit DOM-Manipulation arbeiten würdest.

    Und du hast bis jetzt immer noch kein vollständigen Beispiel-Code gezeigt, mit dem sich deine Probleme nachstellen lassen. Das ist auch etwas, an dem du arbeiten solltest. Also nur Code in einem Forum posten, den du auch selber ausprobiert hast, und nicht nur irgendwelche Ausschnitte davon, die alleine gar nicht lauffähig sind.

    Einen Kommentar schreiben:

Lädt...
X