Anzeige

Wie kann ich jedes mal ein neues "h4" element erstellen während ich drüber loope ?


#1
Hallo erstmal (erster Post und am Ende meiner Nerven),

Ich hatte vor über die Winterferien einen Pokedex zu erstellen. Habe die Bilder und die Namen der ganzen Pokemon über pokeapi bekommen (was auch ganz gut geklappt hat). Ich habe jedes Pokemon in einen einzelnen Button gepackt. Nun habe ich mir das ziel gesetzt dass sobald der User auf einen dieser Pokemon-Buttons klickt ihm Informationen über dieses Pokemon angezeigt werden, mithilfe von bootstrap-modals (z.B. Nummer, Typ,...,) und genau hier hänge ich.
Hier erstmal das modal:
HTML:
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLongTitle">give me unique name</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Some information
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
und hier js:

Javascript:
const app = document.getElementById('root');
//const modal =document.getElementById("exampleModalLongTitle");
var request = new XMLHttpRequest();
const container = document.createElement('div');
container.setAttribute('class', 'container');
app.appendChild(container);
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

function firstPage(){
    request.open('GET', 'http://pokeapi.salestock.net/api/v2/pokemon/?limit=151', true);
    request.onload = function () {
        var data= JSON.parse(this.response);
        for(var i=0; i<151; i++){
            $("h4").html(" ");
            var k=i+1;
            const h5 = document.createElement('h5');
            var capital= capitalizeFirstLetter(data.results[i].name);
            h5.textContent = capital;
            const img = document.createElement("img");
            img.src = "pokemon/"+k+".png";
            const button = document.createElement("BUTTON");
            
            $("button").css("margin","1rem");
            $("button").css("borderRadius","12px");
            button.setAttribute("data-toggle","modal");
            button.setAttribute("data-target","#exampleModalCenter");
            $("h5").css("fontSize","1rem");
            $("h5").css("paddingTop","1rem");
            container.appendChild(button);
            button.appendChild(h5);
            button.appendChild(img);
            // var unique = document.createElement("h4");
            // unique.textContent=capital;
            // modal.appendChild(unique);
            $("h4").append(capital);
        }
    };
    request.send();
}
firstPage();
Mein Problem liegt nun daran, dass ich es einfach nicht hinkriege unique "h4" elemente zu erstellen und sie dann durch das "h4" im modal zu ersetzen.
Denn sobald ich versuche (die kommentierten Zeilen), dass oben genannte zu realisieren, kriege ich entweder nur eine aneinandereihung von Information über alle Pokemon oder nur Informationen über das letzte Pokemon.
Wäre über jede Hilfe dankbar.

der ganze code: {{ pageSvc.title() }}
 

basti1012

Erfahrenes Mitglied
#2
Kannst du das mal inline stellen ,wo der Code am laufen ist ? So kann ich gar nix texten und das ist auch doof. Aber wenn ich dich richtig verstehe brauchst du doch nur die <h4> felder im modal ersetzen.

du kannst das ja mit mehreren möglichkeiten machen zb den ganzen html code zusammen bauen und alle <h4> auf einmal da einsetzten , oder wie du es jetzt machst mit append alle einzelnd da rein. Wenn die aber alle hintereinander sind must du das mit css richten oder noch extra container erstellen.

Am besten wäre wenn du deinen jetzigen Code als laufenden Code postest bei dir auf der Page oder bei codepen. Dann beschreibt du kurz wie es aussehen soll und dann kann man dir noch besser helfen
 
Anzeige

Neue Beiträge

Anzeige