JavaScript截断id为title元素innerHTML时遇Uncaught TypeError错误求助

咱们来一步步拆解你遇到的Uncaught TypeError: Cannot read property 'length' of undefined错误，核心有三个问题需要修正：

1. HTML中违反ID唯一性规范 #

HTML标准明确要求id属性在页面中必须唯一，你现在给多个<h5>元素都设置了id="title"，这会导致DOM选择器行为异常，也不符合规范。应该把id="title"改成class="title"。

2. 循环条件逻辑错误 #

你的for循环写的是：

for (i = 0; i < titles[i].length; i++)

这里完全搞错了——titles是querySelectorAll返回的NodeList集合，它的元素数量是titles.length；而titles[i]是单个DOM元素，根本没有length属性，这直接触发了undefined的报错。正确的循环条件应该是i < titles.length。

3. 函数参数传递错误 #

你调用truncate(titles[i])时，传的是DOM元素本身，但truncate函数期望的是字符串（要截断的文本内容）。所以应该传递元素的innerHTML值，处理完后再把结果赋值回去。

修正后的完整代码 #

HTML部分（仅修改class属性）

<div class="container mx-auto px-4 mt-8">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Karma">
  <div class="w3-row-padding">
    <!-- 所有原id="title"的元素改为class="title" -->
    <div class="w3-quarter w3-container w3-margin-bottom">
      <img class="card-img-top" src="https://www.w3schools.com//w3images/mountains.jpg" alt="Card image" style="">
      <div class="w3-container w3-white">
        <h5 class="card-title title"><b>Hfe</b></h5>
        <p class="card-text">dvcd</p>
      </div>
    </div>
    <!-- 其他卡片的h5元素做同样修改 -->
    <!-- ... 省略其余重复卡片代码 ... -->
  </div>
</div>

JavaScript部分

<script>
// 选择所有class为title的元素
var titles = document.querySelectorAll(".title")

function truncate(input) {
  // 增加空值判断，避免异常输入报错
  if (!input) return '';
  if (input.length > 10) return input.substring(0, 10) + '...';
  else return input;
};

// 修正循环条件，用let声明变量避免污染全局作用域
for (let i = 0; i < titles.length; i++) {
  // 传递innerHTML给截断函数，再将结果赋值回元素
  titles[i].innerHTML = truncate(titles[i].innerHTML)
}
</script>

额外优化建议 #

• 如果需要保留HTML标签结构（比如你的<b>标签），可以考虑用textContent代替innerHTML，只对纯文本内容进行截断，避免破坏标签；
• 可以用forEach简化循环逻辑：

  titles.forEach(title => {
    title.innerHTML = truncate(title.innerHTML);
  });
  

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