How to get the clicked element from the array? JS-CodePudding

I would like to ask how can I access to the clicked element's id from the array? I want to make a memory game, so If I click on the card I want to know what is the id of that clicked card.

const cards = [
    { id: 1, name: "austria", imgSrc: "/img/austria.png"},
    { id: 2, name: "belgium", imgSrc: "/img/belgium.png"},
    /* ... */
]

const cardsPair = [...cards]
const wholeCardsList = [...cardsPair, ...cards]
const shuffledCards = wholeCardsList.sort(() => 0.5 - Math.random());

let actualcard = null

function initBoard() {
    const board_container = document.querySelector('.board_container');
    let displayCards = shuffledCards.map((item) => {
        return `
        <div >
            <div >
                <div >
                    <img src="/img/question.png" alt="Question mark">
                </div>
                <div >
                    <img src=${item.imgSrc} alt="${item.name} flag icon">
                </div>
            </div>
        </div>`;      
    }).join("");

    board_container.innerHTML = displayCards;

    const card = document.querySelectorAll(".card");
    card.forEach((e) => {
        e.addEventListener("click", () => {
            e.parentElement.classList.toggle("flipped");
        });
    });
};

CodePudding user response：

The index of the card object in the array will be the same as the index of the clicked card_container inside its parent, so you can do

e.addEventListener("click", (e) => {
  const child = e.closest('.card-container');
  const index = [...child.parentElement.children].indexOf(child);

And then look up the index in the array of objects.

Or you can put the ID as a data attribute when creating the HTML. Change

    return `
    <div >

    return `
    <div  data-id="${item.id}">

and then you'll be able to retrieve it with

e.addEventListener("click", (e) => {
  const { id } = e.currentTarget.dataset;

CodePudding user response：

Just set an id attribute to the card element, and on click event get the event.currentTarget.id

const cards = [
    { id: 1, name: "austria", imgSrc: "/img/austria.png"},
    { id: 2, name: "belgium", imgSrc: "/img/belgium.png"}
    ...
]

const cardsPair = [...cards]
const wholeCardsList = [...cardsPair, ...cards]
const shuffledCards = wholeCardsList.sort(() => 0.5 - Math.random());

let actualcard = null

function initBoard() {
    const board_container = document.querySelector('.board_container');
    let displayCards = shuffledCards.map((item) => {
        return `
        <div >
            <div  id="${item.id}">
                <div >
                    <img src="/img/question.png" alt="Question mark">
                </div>
                <div >
                    <img src=${item.imgSrc} alt="${item.name} flag icon">
                </div>
            </div>
        </div>`;      
    }).join("");

    board_container.innerHTML = displayCards;

    const card = document.querySelectorAll(".card");
    card.forEach((c) => {
        e.addEventListener("click", (e) => {
            console.log(e.currentTarget.id)
            c.parentElement.classList.toggle("flipped");
        });
    });
};