Afficher image à la place de l'url

Résolu/Fermé
Sidandrain - Modifié le 5 janv. 2021 à 09:18
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 5 janv. 2021 à 13:08
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
5 janv. 2021 à 09:22
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 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
5 janv. 2021 à 13:08
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