Beiträge von regtan

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?

regtan · 26. Januar 2018

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

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

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!!

regtan · 25. Januar 2018

Super! vielen Dank!

regtan · 24. Januar 2018

Hallo, ich such ein "real time" search option zu implementieren. Ich hab den such funktion schon implementiert nur dass problem ist, es wird ganz am anfang aufgerufen und dann nicht mehr. Also wie kann ich es so implementieren dass wenn ich ein buchstabe im search feld schreibe dann kommen nur die wörte die diese Buchstabe beinhalten und so weiter. Danke!

regtan · 21. Januar 2018

ach jetzt vielen vielen Dank!

regtan · 20. Januar 2018

Vielleicht soll man statt replace was anders benutzen, oder?

regtan · 20. Januar 2018

Es sieht so aus:

regtan · 20. Januar 2018

Da kommt ein Fehler: Uncaught TypeError: templ.replace is not a function

regtan · 19. Januar 2018

Das auslesen von #2 ist mir scho klar aber das was du an #31 geschrieben hast, ist mir unklar. Hab nicht vorher gesehen und weiß nicht wo ich das schreiben soll

Code

for(var i =0; i< obj.length; i++){
            item = document.createElement("li"); 
              let img = document.createElement("img"),
                  name = document.createElement("name"),
                  latinName = document.createElement("latinName");
              

              name.innerHTML = obj[i].name;
              name.className = "bird-name";
              latinName.innerHTML = obj[i].latinName;
              latinName.className = "bird-latin-name";
              img.src = obj[i].imagePath;
              img.className = "bird-image";
              item.appendChild(img);
              item.appendChild(name);
              item.appendChild(latinName);
              theList.appendChild(item);

Alles anzeigen

regtan · 19. Januar 2018

mmmmm.... Ich verstehe das nicht ganz

regtan · 19. Januar 2018

Das ist nur für diese Aufgabe. Also ich muss diese Template benutzen und die Angaben von Array benutzen damit die Liste seo aussieht wie auf den JPG. Aber ich weiß nicht wie man so ein Template benutzt.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Birding App</title>
    <link rel="stylesheet" href="resources/css/styles.css">
    <link rel="stylesheet" href="vendors/font-awesome/css/font-awesome.min.css">
</head>

<body>
    <header>
        <ul class="menu">
            <li><i class="fa fa-binoculars" aria-hidden="true"></i></li>
        </ul>
        <h1 class="title">Birding App</h1>
    </header>
    <div class="decal"></div>
    <content>
        <div class="bird-gallery">
            <input type="text" class="bird-search" />
            <ul class="bird-list">
                
            </ul>
        </div>
        <div class="bird-counter">
            <ul class="bird-list">
             
            </ul>
        </div>
    </content>

    <footer>
        <p>
        Die verwendeten Bilddateien entstammen den <a href="https://commons.wikimedia.org/wiki/Main_Page" target="_new">Wikimedia Commons</a>. Die Audio-Aufzeichnungen sind dem <a href="http://www.tierstimmenarchiv.de/" target="_new">Tierstimmenarchiv</a> des <a href="http://www.naturkundemuseum.berlin/" target="_new">Naturkundemuseums Berlin</a> entnommen.<p/>
        <p>Bei der Implementierung der Anwendung wurde <a href="http://underscorejs.org/">underscore.js</a> eingesetzt.</p>
    </footer>

    <script type="text/template" id="bird-list-entry">
        <li class="bird-list-entry" bird-id="<%= id %>">
            <img src="<%= imagePath %>" class="bird-image" />
            <div class="bird-description">
                <span class="bird-name"><%= name %></span>
                <span class="bird-latin-name"><%= latinName %></span>
            </div>
            <span class="add-bird-button">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                </span>
        </li>
    </script>
    <script type="text/template" id="bird-counter-entry">
        <li class="bird-list-entry" bird-id="<%= id %>">
            <img src="<%= imagePath %>" class="bird-image" />
            <div class="bird-interface">
                <div class="bird-info">
                    <span class="bird-name"><%= name %></span>
                    <span class="bird-latin-name"><%= latinName %></span>
                    <div class="bird-counter-info">
                        <span class="bird-counter-decrease button"><i class="fa fa-minus button decrease" aria-hidden="true"></i></span>
                        <span class="bird-counter-increase button"><i class="fa fa-plus button increase" aria-hidden="true"></i></span>
                        <span class="bird-current-max"><%= count %></span>
                    </div>
                </div>
            </div>
        </li>
    </script>
    <script type="text/template" id="bird-list">
        [{ "id":1, "name":"Haussperling", "latinName":"Passer domesticus", "imagePath":"resources/images/haussperling.png", "audioPath":"resources/data/audio/haussperling.ogg" },{ "id":2, "name":"Kohlmeise", "latinName":"Parus major", "imagePath":"resources/images/kohlmeise.png", "audioPath":"resources/data/audio/kohlmeise.ogg" },{ "id":3, "name":"Star", "latinName":"Sturnus vulgaris", "imagePath":"resources/images/star.png", "audioPath":"resources/data/audio/star.ogg" },{ "id":4, "name":"Amsel", "latinName":"Turdus merula", "imagePath":"resources/images/amsel.png", "audioPath":"resources/data/audio/amsel.ogg" },{ "id":5,"name":"Blaumeise", "latinName":"Cyanistes caerruleus", "imagePath":"resources/images/blaumeise.png", "audioPath":"resources/data/audio/blaumeise.ogg" },{ "id":6, "name":"Elster", "latinName":"Pica pica", "imagePath":"resources/images/elster.png", "audioPath":"resources/data/audio/elster.ogg" },{ "id":7, "name":"Grünfink", "latinName":"Chloris chloris", "imagePath":"resources/images/gruenfink.png", "audioPath":"resources/data/audio/gruenfink.ogg" },{ "id":8, "name":"Mehlschwalbe", "latinName":"Delichon urbicum", "imagePath":"resources/images/mehlschwalbe.png", "audioPath":"resources/data/audio/mehlschwalbe.ogg" },{ "id":9, "name":"Mauersegler", "latinName":"Apus apus", "imagePath":"resources/images/mauersegler.png", "audioPath":"resources/data/audio/mauersegler.ogg" },{ "id":10, "name":"Buchfink", "latinName":"Fringilla coelebs", "imagePath":"resources/images/buchfink.png", "audioPath":"resources/data/audio/buchfink.ogg" },{ "id":11, "name":"Ringeltaube", "latinName":"Columba palumbus", "imagePath":"resources/images/ringeltaube.png", "audioPath":"resources/data/audio/ringeltaube.ogg" },{ "id":12, "name":"Feldsperling", "latinName":"Passer montanus", "imagePath":"resources/images/feldsperling.png", "audioPath":"resources/data/audio/feldsperling.ogg" },{ "id":13, "name":"Türkentaube", "latinName":"Streptopelia decaocto", "imagePath":"resources/images/tuerkentaube.png", "audioPath":"resources/data/audio/tuerkentaube.ogg" },{ "id":14, "name":"Rauchschwalbe", "latinName":"Hirundo rustica", "imagePath":"resources/images/rauchschwalbe.png", "audioPath":"resources/data/audio/rauchschwalbe.ogg" },{ "id":15, "name":"Rotkehlchen", "latinName":"Erithacus rubecula", "imagePath":"resources/images/rotkehlchen.png", "audioPath":"resources/data/audio/rotkehlchen.ogg"}]
    </script>
    <script src="vendors/underscore/underscore-min.js"></script>
    <script src="resources/js/BirdingApp.js"></script>
    <script src="resources/js/BirdingModel.js"></script>
    <script src="resources/js/BirdingController.js"></script>
    <script src="resources/js/BirdCounterView.js"></script>
    <script src="resources/js/BirdListView.js"></script>
    <script>
        BirdingApp.init();
    </script>
</body>

</html>

Alles anzeigen

regtan · 19. Januar 2018

Ich hab erst jetzt gemerkt das auf HTML ein template für die Angabe schon fertig steht
Weiß jemand wie genau benutzt man des?

Code

<script type="text/template" id="bird-list-entry">
        <li class="bird-list-entry" bird-id="<%= id %>">
            <img src="<%= imagePath %>" class="bird-image" />
            <div class="bird-description">
                <span class="bird-name"><%= name %></span>
                <span class="bird-latin-name"><%= latinName %></span>
            </div>
            <span class="add-bird-button">
                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
                </span>
        </li>
    </script>

Alles anzeigen

regtan · 19. Januar 2018

Was benutzt man dann für String? Weil ich versuch jetz noch namen dazu hinzufügen aber da kommt der Fehler : BirdingApp.js:41 Uncaught TypeError: Cannot create property 'createTextNode' on string 'Haussperling'

Code

for(var i =0; i< obj.length; i++){
            item = document.createElement("li"); 
              let img = document.createElement("img"),
              name = document.createElement("name");
              name = obj[i].name;
              name.className = "bird-name";
              img.src = obj[i].imagePath;
              img.className = "bird-image";
              item.appendChild(img);
              item.appendChild(name);
              theList.appendChild(item);

Alles anzeigen

regtan · 19. Januar 2018

Super! Vielen Dank!

regtan · 19. Januar 2018

Ja genau das ist es aber wie macht man das?

regtan · 19. Januar 2018

Also ich hab es geschafft, dass die Bilder angezeigt werden aber nicht in die größe die in CSS festgestellt ist. Weiß jmd wie das geht?

Code

for(var i =0; i< obj.length; i++){
            item = document.createElement("li"); 
              let img = document.createElement("img");
              img.src = obj[i].imagePath;
              item.appendChild(img);
              theList.appendChild(item);

regtan · 19. Januar 2018

Ja genau es sollte so aussehen.

Code

.bird-gallery .bird-image {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0;
    float: left;
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;
    border-color: #FFF
}

Alles anzeigen

regtan · 18. Januar 2018

Ja das schon klar aber in css sind schon als elemente. Deswegen frag ich auch, wie kann ich die von array zugreifen.

Code

.bird-gallery .bird-name {
    display: block;
    font-size: 24px;
    color: #333
}

.bird-gallery .bird-latin-name {
    display: block;
    font-size: 15px;
    font-style: italic;
    color: #777
}

.bird-gallery .add-bird-button {
    display: block;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1.5em;
    color: #00662f
}

Alles anzeigen

Beiträge von regtan

Add element to a List

Add element to a List

Add element to a List

Add element to a List

Real Time Search in JavaScript.

Real Time Search in JavaScript.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.

JSON array aus HTML in JS array.