Adapter code pour afficher image
Bonjour
J'ai créé une API dans laquelle on y trouve l'id et l'url de la photo de personnages.
J'ai créer un tableau dans lequel les informations de mes personnages sont affichés avec une boucle et lorsque l'on clique sur le prénom de celui ci, un pop up avec sa photo s'affiche.
Mon problème, la photo ne s'affiche pas dans mon pop up, mon pop up est vide, je pense savoir d'où vient le problème :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| function afficherConservation(film_id){
let popup = document.getElementById("popup");
let content = document.getElementById("content");
let span = document.getElementsByClassName("close")[0];
popup.style.display = "block";
let paragraph = document.createElement('p');
const title = document.createTextNode('Portrait : ');
paragraph.appendChild(title);
content.insertAdjacentElement('beforeend', paragraph, content);
const sautLigne = document.createElement('br');
paragraph.appendChild(sautLigne);
content.insertAdjacentElement('beforeend', paragraph, content);
const req = new XMLHttpRequest();
req.open('GET', 'http://localhost/Fil_Rouge/api.php?portrait_id=' + id, true);
req.onreadystatechange = ()=>{
if(req.readyState === 4 && req.status === 200){
const data = JSON.parse(req.responseText);
paragraph;
if(Object.keys(data).length !== 0){
const state = document.createTextNode(data[0].portrait_url);
paragraph.appendChild(state);
content.insertAdjacentElement('beforeend', paragraph, content );
}
else{
const noValueState = document.createTextNode("Non renseigné");
paragraph.appendChild(noValueState);
content.insertAdjacentElement('beforeend', paragraph, content);
}
}
};
req.send();
// When user clicks on span, close the modal
span.onclick = ()=>{
popup.style.display = "none";
content.innerHTML='';
}
// When the user clicks outside the modal, close it
window.onclick = (event)=>{
if(event.target == popup){
popup.style.display = "none"
content.innerHTML='';
}
}
} |
*portrait.url est l'url de la photo portrait
Que dois-je changer ?
Merci !
