How to show the image instead of the url in javascript

Question

I made this code to show the image of a character in a pop up when you click on his name. My problem is that it's showing the url from my api and not the image and it's always the same one who is showing in the pop up, not the next one.

Here is my js :

function afficherConservation(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?id=' + portrait_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='';
        }

        window.onclick = (event)=>{
            if(event.target == popup){
                popup.style.display = "none"
                content.innerHTML='';
            }
        }
    }

"id" is the id of the character "portrait_url" is the picture

Any suggestion ? What did I do wrong ?

You are creating a text node and populating that with the results of your AJAX call when you need to be creating an `img` element and setting the result of the call to the `.src` property of that element. Also, [`document.getElementsByClassName("close")[0];`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) is very bad code for performance. — Scott Marcus, Jan 04 '21 at 23:30
And, where is `portrait_id` defined? Don't you want to pass the `id` argument of the function? — Scott Marcus, Jan 04 '21 at 23:32

score 1 · Answer 1 · answered Jan 05 '21 at 11:45

Thank you, it was the element as Marcus said ! So I changed this :

    if(Object.keys(data).length !== 0){
        const state = document.createTextNode(data[0].portrait_url);
             paragraph.appendChild(state);
                content.insertAdjacentElement('beforeend', paragraph, content );

To this :

   if(Object.keys(data).length !== 0){
       const state = document.Element('img');
            state.src = data[0].portrait_url;
                 content.insertAdjacentElement('beforeend', paragraph, 
                    content );

And now it works perfectly ! Thank you !

How to show the image instead of the url in javascript

1 Answers1