javascript - 未捕获类型错误 : Cannot read property of undefined

Question

我有这段代码，我试图用它来 chop id 为 title 的元素的 innerHTML:

<script>
    var titles = document.querySelectorAll("#title")

    function truncate(input) {
        if (input.length > 10)
            return input.substring(0, 10) + '...';
        else
            return input;
    };


    for (i = 0; i < titles[i].length; i++) {
        titles[i].innerHTML = truncate(titles[i])
    }
</script>

<div class="container mx-auto px-4 mt-8">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <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">

        <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" id="title"><b>Hfe</b></h5>
                <p class="card-text">dvcd</p>

            </div>
        </div>
        <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" id="title"><b>nbvn</b></h5>
                <p class="card-text">vbnv</p>

            </div>
        </div>
        <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" id="title"><b>New post</b></h5>
                <p class="card-text">New</p>

            </div>
        </div>
        <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" id="title"><b>Again</b></h5>
                <p class="card-text">mnmbmbm</p>

            </div>
        </div>
        <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" id="title"><b>mn,</b></h5>
                <p class="card-text">m</p>

            </div>
        </div>
        <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" id="title"><b>Reacting to the the funniest breakup texts</b></h5>
                <p class="card-text">sfd</p>

            </div>
        </div>
        <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" id="title"><b>.m,m,</b></h5>
                <p class="card-text">nvb, ,bmvbcv
                    vcnbcm mbnmnbm,.mnm,,m.m,m,</p>

            </div>
        </div>
        <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" id="title"><b>DVGGGGGGGGGGHDGGGGGGGGGHHHHHHGGGGGGGGGGGGGGGGGGGGGGGGGGG</b></h5>
                <p class="card-text">GGGGGG</p>

            </div>
        </div>

    </div>
</div>

它给了我这个错误:

Uncaught TypeError: Cannot read property 'length' of undefined

Answer 1

事情很少。首先，您的标题返回的是对象，而不是字符串。因为它是一个 HTML 元素。在循环中 titles[i].length 正在检查当前 HTML 元素的长度，这是不可能的，length 检查数组或字符串长度。因此，您应该使用 titles.length，它是 HTML 元素的数组集合。

这也意味着对于 truncate 函数，您将向函数发送 HTML 元素，而不是字符串。要传递字符串，您应该定位标题内的 b 元素，这样就不会省略 HTML 结构，然后获取 textContent 进行进一步处理 -> const text = titles[i].querySelector('b').textContent

所以你的函数将如下所示:

var titles = document.querySelectorAll("#title")

function truncate(input) {
   if (input.length > 10)
      return input.substring(0,10) + '...';
   else
      return input;
};


for(i=0; i < titles.length; i++){
    const text = titles[i].querySelector('b').textContent
    titles[i].querySelector('b').textContent =  truncate(text)
}

   <div class="container mx-auto px-4 mt-8">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <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">

  <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" id = "title"><b>Hfe</b></h5>
        <p class="card-text">dvcd</p>

      </div>
    </div>
<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" id = "title"><b>nbvn</b></h5>
        <p class="card-text">vbnv</p>

      </div>
    </div>
<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" id = "title"><b>New post</b></h5>
        <p class="card-text">New</p>

      </div>
    </div>
<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" id = "title"><b>Again</b></h5>
        <p class="card-text">mnmbmbm</p>

      </div>
    </div>
<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" id = "title"><b>mn,</b></h5>
        <p class="card-text">m</p>

      </div>
    </div>
<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" id = "title"><b>Reacting to the the funniest breakup texts</b></h5>
        <p class="card-text">sfd</p>

      </div>
    </div>
<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" id = "title"><b>.m,m,</b></h5>
        <p class="card-text">nvb, ,bmvbcv
vcnbcm mbnmnbm,.mnm,,m.m,m,</p>

      </div>
    </div>
<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" id = "title"><b>DVGGGGGGGGGGHDGGGGGGGGGHHHHHHGGGGGGGGGGGGGGGGGGGGGGGGGGG</b></h5>
        <p class="card-text">GGGGGG</p>

      </div>
    </div>

  </div>