Add element to a List

regtan · 26. Januar 2018

Hey! Ich versuch gerade aus eine Liste mit such Funktion rauszufiltern den Element nach dem man sucht und drauf clicken und diesen Element auf ein List hinzufügen. Es funktioniert bis man ein anderes Element auswählt und dann wird der alte ersetzt aber ich möchte dass der neuer Element noch dazu kommt und nicht den alten ersetzt. Ich weiß es ist ein bisschen schwierig das alles Vorzustellen aber kann jemand Irgendein verdacht haben wo das Problem liegen kann? Danke!!

basti1012 · 26. Januar 2018

Ja das kann vieles sein.Zb du überschreibst den alten und fügst nicht hinzu.Oder was auch immer.Zeig doch mal deinen vollständigen Code dann kann man besser helfen

regtan · 26. Januar 2018

Ja du hast recht. Also auf diese Funktion werde ich diesen neue element und will in eine Liste Hinzufügen. Mit den Code wird dieser neue Elment in die Liste schon hinzugefügt aber wie gesagt wenn ich eine andere klicke dann wird ersetzt. Ich hab es so probiert mit diesen Teil dass ich auskommentiert habe aber bekomme ein error.

Code

function addBirdToCounter(birdName,id,img,latinName){
       //  li = document.createElement("li");
        birdChose = "";
                    birdChose += list.replace("<%= latinName %>", latinName)
                                       .replace("<%= name %>", birdName)
                                       .replace("<%= imagePath %>", img)
                                    .replace("<%= id %>",id)
                                     .replace("<%= count %>",countTheBird);
                
                birdCounter[0].innerHTML = birdChose;
      //  li.appendChild(birdCounter[0]);
             
        }

Alles anzeigen

regtan · 26. Januar 2018

Ich hab ein GIF datei wie dass alles aussehen sollte aber ist 4,3 MB und kann nicht hochladen

basti1012 · 26. Januar 2018

dann mach das bild doch mal kleiner.Das geht sogar mit paint ,was windows schon drauf hat.

basti1012 · 26. Januar 2018

probier mal so

Code

birdCounter[0].innerHTML += birdChose;

Wenn der ganze code da währe könnte man es selber testen ,so kann ich nur raten

regtan · 26. Januar 2018

Ich kann den ganzen code hochladen aber da sind 5 JS Dateien. Es funktioniert so wie du es gesagt hast nur das Problem jetzt ist dass beim zweiten Auswahl 2 Elemente auf die liste hinzugefügt werden und beim dritten dann 3 usw. Wi könnte ich das Lösen?

basti1012 · 26. Januar 2018

Jetzt weiss ich wie du das meinst. Ja da warten wir mal ab bis wer anderes was sagt dazu.Ich wüsste jetzt keinen weg ohne den rest zu sehen.Mit den Code schnipsel komme ich persönlich nicht weiter.

Aber mal abwarten ,die anderen sagen bestimmt auch noch was dazu.

Sempervivum · 26. Januar 2018

Zitat

das Problem jetzt ist dass beim zweiten Auswahl 2 Elemente auf die liste hinzugefügt werden und beim dritten dann 3 usw.

Das liegt daran, dass Du jedes Mal ein Element zu birdChose hinzu fügst:

Code

birdChose += list.replace("<%= latinName %>", latinName)

Wenn Du das Plus weg nimmst, sollte es funktionieren:

Code

birdChose = list.replace("<%= latinName %>", latinName)

regtan · 26. Januar 2018

Ich hatte das auch probiert aber es passiert trotzdem

Sempervivum · 26. Januar 2018

Am besten wäre es, wenn man das im Zusammenhang sehen könnte. Mach doch eine ZIP-Datei mit der HTML- und den JS-Dateien und poste sie als Anhang. Bilder kannst Du weg lassen, weil sonst die Datei u. U. zu groß wird.

regtan · 26. Januar 2018

Ich hab aber alle Fotos gelöscht da es zu groß wäre. Und ich glaube das Problem liegt bei der verknüfung der Funktionen.

Sempervivum · 26. Januar 2018

Zitat

drauf clicken und diesen Element auf ein List hinzufügen.

Suchfunktion funktioniert. Wo drauf klicken? Auf das + Zeichen oder das ganze Feld?

Und in welcher JS-Datei findet man den Code, den Du oben gepostet hast?

regtan · 26. Januar 2018

ja auf + . den findet man auf BirdCounterView

Sempervivum · 26. Januar 2018

Und was soll dann passieren? Das Element soll irgend wo dazu gefügt werden? Zu der bird-list? Die ist doch schon fertig?

Sempervivum · 26. Januar 2018

Der Debugger bringt es an den Tag: Der Eventlistener für den Plus-Button wird mehrfach aufgerufen. Überprüfe die birds-list, ob Du den Listener mehrfach registrierst.

regtan · 26. Januar 2018

Ja da ist ein list und soll dazu gefügt werden. Plus und minus button funktioniert immer noch nicht. der eventlistener ist bei birdingmodel und birdsearch methode, und wird nicht mehrmals aufgerufen, soweit ich es verstehe.

basti1012 · 26. Januar 2018

ich bekomme nee fehlermeldung wenn ich plus klicke.

BirdingModel.js:40 Uncaught TypeError: Cannot read property 'addBirdToCounter' of undefined

at HTMLSpanElement.addNewBird (BirdingModel.js:40)

da höhrt es auf ,ich komme nicht mal bis zum sortieren.

regtan · 26. Januar 2018

Also die minus und plusbutton kann man zuerst auch löschen weil das kommt als nächstes zu Lösen

Sempervivum · 26. Januar 2018

Das Problem scheint mir hier zu sein:

Code

function birdSearch(){
    searchWord = controller.getSearchString();
    ul = theList;
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        birdName = li[i].getElementsByClassName("bird-name")[0].innerHTML.toLocaleLowerCase();
        birdAddButton = li[i].getElementsByClassName("add-bird-button")[0];
        birdAddButton.addEventListener("click", addNewBird);
       if (birdName.includes(searchWord)) {
         li[i].style.display = "";
       } else {
     li[i].style.display = "none";
      }
    }}

Alles anzeigen

Diese Funktion wird jedes Mal aufgerufen, wenn sich im Eingabefeld etwas ändert. Und jedes Mal wird der Eventlistener mit addNewBird hinzugefügt. Du darfst diesen Listener nur einmal hinzu fügen, wenn Du die Liste anlegst.

Add element to a List

Jetzt mitmachen!

Teilen

Tags