Necesito ayuda, recibo este error al intentar obtener el título de la estructura, no sé cómo solucionarlo.

Este código funciona bien.

 function addCard(x,who) { if(who === 'player'){ const element = document.querySelector(".playercards"); element.insertAdjacentHTML('afterbegin', `<button id='${x}' class='cardbutton'><p>${deck[x].title}</br></br>Action: ${deck[x].points} ${deck[x].action}</p></button>`); } if(who === 'bot'){ const element = document.querySelector(".botcards"); element.insertAdjacentHTML('afterbegin', `<button id='bot${x}' class='cardbutton'><p>${deck[x].title}</br></br>Action: ${deck[x].points} ${deck[x].action}</p></button>`); } } playerCards.forEach((node, position) => addCard(node.getValue(),'player')); botCards.forEach((node, position) => addCard(node.getValue(),'bot'));

Pero este error ocurre cuando uso este deck[cardId].title No funciona, no sé por qué, he intentado poner solo un número como este deck[1].title pero todavía me da un error. Que problema puede ser?

 Uncaught TypeError: Cannot read properties of undefined (reading 'title') at HTMLUListElement.clickedOnCard (gamescript.js:47)

imagen de error

47 línea es

 console.log(deck[cardId].title())

 const deck = [ {id: 0, title: 'Šokoladas', action: 'heal', points: 5}, {id: 1, title: 'Sausainis', action: 'heal', points: 2}, {id: 2, title: 'Pulti', action: 'damage', points: 3}, {id: 3, title: 'Saukstas', action: 'damage', points: 1} ] document.querySelector(".playercards").addEventListener("click",clickedOnCard, false); function clickedOnCard(e) { if(e.target !== e.currentTarget){ var cardId = e.target.id || e.srcElement.id; console.log(deck[cardId].title) // Deletes clicked player card removeCard(cardId); // Removes bot card removeCard(`bot${botCards.tail().getValue()}`); botCards.removeLast(); updateHp(); e.stopPropagation(); postlog(getDate() + " Game: Button clicked." + " Used: " + cardId); } };