The browser says that this.getAttribute is not a function. I've seen a similar post on Stack, the OP was told to send this to the function, but it doesn't work for me. Here's the snippet:
function reveal()
{
this.src = "img/" + this.getAttribute("data-value") + ".png";
}
function display_cards(cards, n)
{
for (i = 0; i < cards.length; i++)
{
if (i % n == 0)
{
document.getElementById("container").innerHTML += '<br/>';
}
document.getElementById("container").innerHTML += '<img src="img/back.png" class="card" onclick="reveal(this)" data-value="'+cards[i]+'"/>';
}
}
Get this in function as an incoming parameter: function reveal(img), for example.
const cards = ["linear-flat-wedding-monograms_52683-64319",
"flat-car-poster-with-photo-horizontal_52683-64510",
"gradient-grainy-gradient-shapes_23-2148975080"];
display_cards(cards,3)
function reveal(img)
{
img.src = "https://image.freepik.com/free-vector/" + img.getAttribute("data-value") + ".jpg";
}
function display_cards(cards, n)
{
for (i = 0; i < cards.length; i++)
{
if (i % n == 0)
{
document.getElementById("container").innerHTML += '<br/>';
}
document.getElementById("container").innerHTML += '<img src="https://image.freepik.com/free-vector/gradient-grainy-gradient-shape-set_23-2148971570.jpg" class="card" onclick="reveal(this)" data-value="'+cards[i]+'"/>';
}
}<div id="container"></div>