如何将JavaScript对象内容渲染到指定div？点击侧边栏遇undefined问题

1. 修正数据结构与批量绑定点击事件 #

首先确保你的dragonArray包含所有龙的对象，比如：

const infernum = {
  name: "Infernum",
  element: "Fire",
  habitat: "The Scorching Caldera",
  age: 7258,
  text: "asda"
};

const sprite = {
  name: "Sprite",
  element: "Wind",
  habitat: "The Cloud Peaks",
  age: 3421,
  text: "A tiny, swift dragon"
};

const dragonArray = [infernum, sprite];

给所有侧边栏元素批量绑定点击事件，避免重复编写代码：

// 选择所有侧边栏的龙元素（直接通过类名筛选，或给元素统一加sidebar-dragon类更灵活）
const sidebarDragons = document.querySelectorAll('.infernum, .sprite');

sidebarDragons.forEach(dragonEl => {
  dragonEl.addEventListener('click', function() {
    const targetName = this.id; // 确保元素id和对象name完全匹配
    const dragonData = getDragonData(dragonArray, targetName);
    if (dragonData) {
      renderDragonData(dragonData);
    }
  });
});

2. 简化数据查找逻辑 #

原getSome函数存在冗余和下标错误（跳过最后一个元素），直接用find方法即可：

function getDragonData(arr, name) {
  // 查找匹配name的对象，找不到会返回undefined
  return arr.find(obj => obj.name === name);
}

3. 实现数据填充到目标DOM #

编写函数将找到的对象内容填充到.dragons的子元素中：

function renderDragonData(data) {
  document.querySelector('.dragon-name').textContent = data.name;
  document.querySelector('.element').textContent = data.element;
  document.querySelector('.habitat').textContent = data.habitat;
  document.querySelector('.age').textContent = data.age;
  document.querySelector('.text').textContent = data.text;
}

4. 可选：优化HTML结构 #

给侧边栏元素统一添加类名，方便后续扩展：

<div class="sidebar-dragon infernum" id="Infernum">
  <div class="dragon-push">Infernum</div>
  <div class="text-push"></div>
</div>
<div class="sidebar-dragon sprite" id="Sprite">
  <div class="dragon-push">Sprite</div>
  <div class="text-push"></div>
</div>
<div class="dragons">
  <div class="dragon-name">no*</div>
  <div class="element">el*</div>
  <div class="habitat">ha*</div>
  <div class="age">age*</div>
  <div class="text">te*</div>
</div>

此时批量选择元素可改为document.querySelectorAll('.sidebar-dragon')，扩展性更强。

问题排查要点 #

• 若返回undefined：检查侧边栏元素id与对象name是否完全一致（大小写敏感）；确认dragonArray正确包含所有对象；检查函数参数传递是否正确。
• 若数据不显示：检查目标DOM元素类名拼写；确保找到数据后调用了renderDragonData函数。

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