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:
und hier js:
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() }}
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">×</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() }}