JavaScript操作DOM时出现undefined错误该如何解决

• <script>标签同时设置了src="./index.js"属性和内嵌代码，浏览器解析时会忽略带src属性的script标签的内部内容，导致updateCard函数未被定义，调用时直接抛出undefined错误。
• DOM元素获取逻辑错误：document.getElementsByTagName("h1")返回的是HTMLCollection类数组集合，并非单个DOM元素，该集合本身不存在textContent属性，即使函数能正常定义，执行时也会触发undefined相关报错。

1. 调整script标签配置：移除当前script标签的src属性，如果确实需要加载外部index.js文件，单独新增一个<script src="./index.js"></script>标签即可，内外代码不共用同一个script标签。
2. 修正DOM元素获取逻辑：优先从已获取的card容器下查找子元素，既可以避免匹配到页面其他位置的同名标签，也能直接拿到单个DOM元素，同时补充剩余role、bio参数的更新逻辑，完整实现函数功能。

修复后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>DOM</title>
</head>
<body>
  <section id="card">
    <h1>New Student</h1>
    <h3>Role</h3>
    <p>Bio Text Goes Here</p>
  </section>

  <script>
    function updateCard(elem, name, role, bio) {
      const card = document.getElementById(elem);
      // 增加容错逻辑，避免元素不存在时报错
      if (!card) return;
      const head = card.querySelector("h1");
      const roleElem = card.querySelector("h3");
      const bioElem = card.querySelector("p");
      head.textContent = name;
      roleElem.textContent = role;
      bioElem.textContent = bio;
    }
    updateCard("card", "shantanu", "engineer", "just a normal person");
  </script>
</body>
</html>

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