访问deck[cardId].title报Cannot read properties of undefined错误如何解决

• 事件冒泡目标匹配错误：你给.playercards绑定了点击事件，但卡片按钮内部嵌套了<p>标签，点击卡片时触发事件的e.target大概率是内层的<p>元素而非外层的<button>，<p>没有设置id属性，所以你获取到的cardId是空值或者非预期值，直接用它访问数组就会得到undefined，读取undefined的title属性自然会报错。
• 属性调用写法错误：你贴出的第47行代码写的是console.log(deck[cardId].title())，title是你定义在deck对象里的普通字符串属性，不是函数方法，不能加()调用。
• ID类型不规范：就算拿到了button的id，从DOM属性读取到的id是字符串类型，虽然数组支持字符串形式的数字下标访问，但不符合常规用法，后续容易引发其他逻辑问题。

1. 修正事件目标获取逻辑，点击时向上查找最近的卡片按钮元素，拿到正确的按钮后再获取id，同时把id转为数字类型：

// 把原来的 var cardId = e.target.id || e.srcElement.id; 替换为下面的代码
const cardButton = e.target.closest('.cardbutton');
if (!cardButton) return; // 没匹配到卡片按钮直接终止逻辑，避免报错
const cardId = Number(cardButton.id);

2. 修正属性调用写法，去掉title后的括号：

console.log(deck[cardId].title)

3. 可选优化，加一层存在性判断，避免后续下标越界报错：

if (deck[cardId]) {
  console.log(deck[cardId].title);
} else {
  console.error('不存在对应id的卡片：', cardId);
}

内容的提问来源于stack exchange，提问作者Man Tas