I made a function that shows card images after I click a button. the problem is that it doesn't work on chrome. the chrome editor presents an extra '/' to the end of the path.
function renderDeck(deck,ph)
{
var htmlStr = document.getElementById(ph).innerHTML;
for (var i = 0; i < deck.length; i++) {
htmlStr += '<div>';
htmlStr += '<img src=' + deck[i].path + '/>';
htmlStr += '</div>';
}
document.getElementById(ph).innerHTML = htmlStr;
}
An example of what I push inside the deck
deck.push({ name: 'red_joker', path: 'cardImages/red_joker.png', val: 15 });
what can be the problem?
Off Topic: Avoid innerHTML += ... because
function renderDeck(deck, ph) {
// create the markup for the new items
const htmlStr = deck.map(item => `<div><img src="${item.path}"></div>`).join("\n");
// parse the `htmlStr` into a DOM Node that you can add to other DOM Nodes.
const fragment = document.createRange().createContextualFragment(htmlStr);
// append the DocumentFragment to the existing element.
document.getElementById(ph).append(fragment);
}
And a link for those that don't know yet what a DocumentFragment is.