JavaScript中通过元素ID查找对象属性值返回undefined求助

嘿，我来帮你搞定这个问题！从你描述的情况来看，拿到元素ID后找不到对应对象的role属性返回undefined，大概率是这几个环节出了问题，咱们一步步拆解：

1. 先确认事件回调里正确拿到了元素ID #

首先得保证你在showPopup/hidePopup函数里确实获取到了目标元素的ID（也就是"tom"）。在事件回调中，this默认指向触发事件的DOM元素，但如果用了箭头函数或者修改过this指向，就会出问题。

可以先在回调里加个打印验证：

function showPopup() {
  const elementId = this.id;
  console.log('当前元素ID:', elementId); // 先看这里是不是输出"tom"
  // 后续逻辑...
}

如果这里打印的不是"tom"，那问题出在ID获取环节，得检查DOM元素的ID是否真的设为了"tom"，或者回调里的this是否被篡改。

2. 确认目标对象的结构与属性拼写正确 #

如果ID确实是"tom"，那就要检查你的tom对象是否存在，以及role属性的拼写有没有错误（比如大小写、少打字母）：

情况1：直接定义了tom变量 #

// 正确示例
const tom = { role: 'content-editor' };
// 错误示例（拼写错误）
const tom = { rol: 'content-editor' }; // 这里把role写成rol，自然返回undefined

情况2：对象存在于一个映射集合中 #

很多时候我们会把多个对象存在一个字典里，这时候要注意用方括号语法通过字符串ID获取对象，而不是点语法：

// 比如定义了一个用户映射
const userMap = {
  tom: { role: 'admin' },
  jerry: { role: 'regular-user' }
};

function showPopup() {
  const elementId = this.id;
  // 正确写法：用方括号索引字符串ID
  const targetUser = userMap[elementId];
  console.log(targetUser?.role); // 用可选链避免对象不存在时报错
  // 错误写法：userMap.elementId 会找名为elementId的属性，而不是字符串ID对应的属性
}

3. 修正循环绑定的两个小问题 #

看你代码里还有两个容易忽略的细节：

• 循环里用var i会因为函数级作用域导致潜在的绑定错误，改成let i形成块级作用域更安全；
• 你给同一个元素绑定了两个mouseover事件（show和hide同时触发），这显然不符合预期，应该把hidePopup绑定到mouseout事件：

修正后的循环代码：

const highlightArea = document.getElementsByClassName('highlightArea');
// 用let代替var，避免作用域问题
for (let i = 0; i < highlightArea.length; i++) {
  highlightArea[i].addEventListener("mouseover", showPopup);
  // 把hidePopup绑定到mouseout事件
  highlightArea[i].addEventListener("mouseout", hidePopup);
}

排查步骤总结 #

1. 先验证事件回调里获取的ID是否正确；
2. 检查目标对象的定义和属性拼写；
3. 用正确的语法从映射集合中获取对象；
4. 修正循环的作用域和事件绑定类型。

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