My Javascript function is just displaying code on my HTML page

June 12, 2022

I’m trying to add HTML from my JS file with innerHTML and its just displaying text on my HTML file instead of reading it in as image. This is my JS file and the function below is inside a class.

setCardHtml(){
    let imageHtml = this.cards.map((image) => `<img class="cards base-cards" src="/images/${image}.png">`).join('')
    for (let image of imageHtml) {
        elements.playerCards.innerHTML += image 
    }
}

This is what ends up showing on my HTML when I host the site. The images that are showing are just placeholder images in my HTML file.

I’ve triple checked the pathing to my images to make sure its leading to the image and I don’t think thats the problem but here is the structure of my files.

+--_html-css-js
|   +--_css
|   |  +--bj.css
|   +--_js
|   |  +--bj.js
|   +--_html
|   |  +--bj.html
+--_images
   +images.png

>Solution :

So what’s happening is you created a string (which is an array of characters) when you did let imageHtml = this.cards.map((image) => ).join(''). Then then you looped through each character and appeneded it and the entire string to the innerHTML.

It would be enough to just do elements.playerCards.innerHTML += imageHtml.

setCardHtml(){
     let imageHtml = this.cards.map((image) => `<img class="cards base-cards" src="/images/${image}.png">`).join('')

     elements.playerCards.innerHTML += imageHtml   
}