Beiträge von Sempervivum

Wahrscheinlich brauchst Du dafür kein try/catch. Das Handbuch sagt:

Zitat

Im Fehlerfall gibt file_get_contents() FALSEzurück.

http://php.net/manual/de/function.file-get-contents.php

Du kannst es jedoch so machen wie die echte Fancybox und den Inhalt (.fancybox-inner) parallel zum Hintergrund (.fancybox-g) anlegen anstatt als Kindelement:

html-seminar.de/woltlab/attachment/1352/

Muss denn die Funktion addNewBird an die Suche gebunden sein? Einfacher wäre es, wenn Du sie dort definieren würdest, wo die Liste aufgebaut wird und wo der Listener registriert werden muss.

Oh, das tut mir Leid! Ich wollte dich nicht angreifen. Hatte vermutet, dass das ein Muster ist, das von der Aufgabe vorgegeben wurde. Weil Du in anderem Zusammenhang mal geschrieben hattest, dass Du etwas nicht anwenden kannst, weil die Aufgabe es anders verlangt.

Und da heißt es immer, OOP verbessere die Wartbarkeit und Änderungsfreundlichkeit oder stelle sie gar sicher. Beides setzt Lesbarkeit voraus aber hier sucht man sich ja dumm und dämlich, bis man etwas gefunden hat.

Das Problem scheint mir hier zu sein:

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";
      }
    }}

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.

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.

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

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?

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.

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:

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

Wenn Du das Plus weg nimmst, sollte es funktionieren:

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

Ich habe mal das Problem auf das wesentliche reduziert und in eine Testseite eingefügthtml-seminar.de/woltlab/attachment/1349/

So sieht die Ansicht im HTML-Inspektor aus. Man erkennt, dass das n1 nicht von Hochkommas eingeschlossen ist. Daher interpretiert Javascript es als Variable, die es nicht findet. Ändert man es so:

AuswahlFeld.innerHTML = "<p onclick='ClosePopUp(\"AuswahlFeldHintergrund\")'>X</p><form method='post' action='test.php' >" + content + "</br></br><button onclick='AddRadioValueTOCheckbox(\"" + feld + "\"," + RadioValue + ")' name='submitAuswahlFeld' type='button'>OK</button><form></br>";

funktioniert es.

Einige der anderen Punkte, die Basti genannt hat, sind mir auch aufgefallen.

Am einfachsten: URL https://code.jquery.com/jquery-1.12.4.js im Browser öffnen, dann wird das Javascript angezeigt. Dann mit "Seite - Speichern unter" o. ä., je nach Browser, speichern.

Ja, ich denke, mit deiner Vermutung liegst Du richtig. Lösung indem Du für das geklonte Eingabefeld ebenfalls den Datepicker initialisierst:

function addbase() {
    var elmnt = document.getElementsByClassName("input")[a];
    var cln = elmnt.cloneNode(true);
    var zuf = document.getElementsByClassName("inhalt")[0];
    zuf.appendChild(cln);
    $(cln).datepicker();
    var btn = elmnt.getElementsByTagName("DIV")[4];

Immer voraus gesetzt, dass Du den Datepicker von jQuery-UI verwendest.

Mit einer Tabelle wäre es sicher möglich, wenn man spanning für den inneren Bereich nehmen würde, aber sematisch sicher verfehlt.

Ich habe hier mal etwas mit Flexbox ausgearbeitet. Etwas kompliziert vom CSS her, aber eine bessere Lösung fiel mir nicht ein.

Möglicher Weise mit Bootstrap, aber damit habe ich mich noch nicht beschäftigt.

https://jsfiddle.net/1gq0tuqu/8/

Nein, replace ist schon richtig. Auf die Namen hatte ich jetzt nicht so geachtet und sie stimmen noch nicht. Außerdem ist bei den ersten replace eine Klammer zu viel. Und das += funktioniert nicht für das innerHTML. Dieses funktioniert bei mir:

           function init() {
                allBirds.classList.remove("hidden");
                var obj = JSON.parse(listOfBirds);
                console.log(obj);
                var templ = document.getElementById("bird-list-entry").innerHTML;
                var thehtml = "";
                for (var i = 0; i < obj.length; i++) {
                    thehtml += templ.replace("<%= latinName %>", obj[i].latinName)
                                       .replace("<%= name %>", obj[i].name)
                                       .replace("<%= imagePath %>", obj[i].imagePath); // evtl. weitere Ersetzungen
                }
                document.querySelector(".bird-list").innerHTML = thehtml;
            }

Oh, da ist mir ein Fehler unterlaufen. Versuche dies für die erste Zeile:

var templ = document.getElementById("bird-list-entry").innerHTML;

Wie man globale Variablen vermeidet, wird z. B. hier beschrieben:

https://stackoverflow.com/questions/1841…s-in-javascript

Eine Möglichkeit, die ich selber gern anwende ist, die Werte in data-Attributen zu speichern, z. B. so bei den Clicks:

                //clicks = 0;
                
                document.getElementById("score").innerHTML = 0;
                document.getElementById("score").setAttribute("data-clicks", 0);
                document.getElementById("endscore").innerHTML = 0;

// und im weiteren Verlauf:
document.getElementById("score").setAttribute("data-clicks", parseInt(document.getElementById("score").getAttribute("data-clicks")) + 1);

Hier bietet es sich sofort an, das Element #score nur einmal zu ermitteln, aber dann muss man Obacht geben, dass man nicht wieder eine globale Variabel erzeugt.

Ah so. Jetzt hast Du ja das HTML und brauchst die Elemente nicht mehr mit Javascript anzulegen. Jetzt müsste es also etwa so aussehen:

var templ = document.getElementById("bird-list-entry");
for(var i =0; i< obj.length; i++){
    var thehtml = templ.replace(("<%= latinName %>", obj[i].latinname)
                       .replace("<%= name %>", obj[i].name)
                       .replace("<%= imagePath %>", obj[i].imagepath); // evtl. weitere Ersetzungen
}
document.querySelector(".bird-list").innerHTML += thehtml;

Was ist dir denn unklar? In Posting #2, der zweite Codeblock, ist angeben, wie Du des Text eines Templates ausliest. Dann brauchst Du ihn zunächst nur mit replace() zu überarbeiten. Dann mit innerHTML in die bird-list einfügen.