Afficher image à la place de l'url

Résolu
Sidandrain -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
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

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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...
0