Afficher image à la place de l'url [Résolu]

Signaler
-
Messages postés
31042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2021
-
Bonjour,

J'essai de faire en sorte qu'un pop up apparaissent avec les données de mon API lorsque je clique à un endroit précis.

Mon problème c'est que la pop up apparait mais c'est l'url qui est affiché dans le pop up et non l'image, de plus, c'est toujours le même URL qui s'affiche alors qu'il devrait y avoir 9 photos.

Une idée ?


function afficherPortrait(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='';
        }
    }
}

EDIT : Correction des balises de code : Ajout du LANGAGE pour avoir la coloration syntaxique

1 réponse

Messages postés
31042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2021
3 182
Bonjour,

Une image .. ça se visualise grace à une balise html <img
Donc, c'est dans le traitement de ton retour ajax que tu dois créer/gérer les différents contenus...

PS: le mot "const" sert à déclarer des CONSTANTES ... et les constantes.. ça doit être.. constant...
A la place, prend l'habitude d'utiliser les mots clés VAR ou LET pour déclarer tes variables...

PS²: Lorsque tu postes du code sur le forum, tu dois préciser le LANGAGE dans les balises de code.
Explications ( à lire entièrement !! ) disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Messages postés
31042
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
16 janvier 2021
3 182
Bonjour,
    • suite à ton signalement **

Lorsqu'une question est résolue ... on ne la supprime pas....
Elle pourrait servir à d'autres internautes ayant le même genre de question que toi...