最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Cannot read property 'innerText' of undefined - Stack Overflow

programmeradmin3浏览0评论

I am having errors with the following code. I am trying to get the values of id id05 if the elements are selected (class selected are the elements selected).

HTML:

<ul id="items" class="clearfix">

  <!-- ---------- this item is selected --------------- -->
  <li class="item folder selected">
    <a href="/t1/">

      <!-- -------this is the element whose innerTEXT i want ----------- -->
      <span id="id05" class="label" title="t1">t1</span>
    </a>
  </li>


  <!-- ---------- this item is also selected --------------- -->

  <li class="item folder page selected">
    <a href="/upl/" target="_blank">

      <!-- -------this is the element whose innerTEXT i want ----------- -->
      <span id="id05" class="label" title="upl">upl</span>
    </a>
  </li>

  <!-- ---------- this item is not selected --------------- -->

  <li class="item file">
    <a href="Ff.html/" target="_blank">
      <span id="id05" class="label" title="Ff.html">Ff.html</span>
    </a>
  </li>
</ul>

JS:

function del() {
  var name;

  var nam = document.querySelectorAll(".selected");

  for (var i = 0; i < nam.length; i++) {
    name = document.getElementById("id05")[i].innerText; //Here is the error
  }
  console.log(name);
}

console.log - Uncaught TypeError: Cannot read property 'innerText' of undefined

I am having errors with the following code. I am trying to get the values of id id05 if the elements are selected (class selected are the elements selected).

HTML:

<ul id="items" class="clearfix">

  <!-- ---------- this item is selected --------------- -->
  <li class="item folder selected">
    <a href="/t1/">

      <!-- -------this is the element whose innerTEXT i want ----------- -->
      <span id="id05" class="label" title="t1">t1</span>
    </a>
  </li>


  <!-- ---------- this item is also selected --------------- -->

  <li class="item folder page selected">
    <a href="/upl/" target="_blank">

      <!-- -------this is the element whose innerTEXT i want ----------- -->
      <span id="id05" class="label" title="upl">upl</span>
    </a>
  </li>

  <!-- ---------- this item is not selected --------------- -->

  <li class="item file">
    <a href="Ff.html/" target="_blank">
      <span id="id05" class="label" title="Ff.html">Ff.html</span>
    </a>
  </li>
</ul>

JS:

function del() {
  var name;

  var nam = document.querySelectorAll(".selected");

  for (var i = 0; i < nam.length; i++) {
    name = document.getElementById("id05")[i].innerText; //Here is the error
  }
  console.log(name);
}

console.log - Uncaught TypeError: Cannot read property 'innerText' of undefined

Share Improve this question edited Jan 3, 2018 at 16:07 freginold 3,9563 gold badges15 silver badges29 bronze badges asked Jan 3, 2018 at 15:38 Asfan UllaAsfan Ulla 491 gold badge1 silver badge8 bronze badges 3
  • 4 You have multiple elements with the same id, they must be unique. Your issue is because you cannot access getElementById() by index as it only returns a single element – Rory McCrossan Commented Jan 3, 2018 at 15:40
  • 2 IDs are like Highlander. There can be only one. Change them to class and your code will work. – Reinstate Monica Cellio Commented Jan 3, 2018 at 15:41
  • Thank you. Every time i forget this XD – Asfan Ulla Commented Jan 3, 2018 at 15:59
Add a ment  | 

1 Answer 1

Reset to default 4

Try this instead:

HTML:

<ul id="items" class="clearfix">
  <li class="item folder selected">
    <a href="/t1/">
      <span class="label" title="t1">t1</span>
    </a>
  </li>
  <li class="item folder page selected">
    <a href="/upl/" target="_blank">
      <span class="label" title="upl">upl</span>
    </a>
  </li>
  <li class="item file">
    <a href="Ff.html/" target="_blank">
      <span class="label" title="Ff.html">Ff.html</span>
    </a>
  </li>
</ul>

Javascript:

function del(){
  var selected = document.querySelectorAll("li.selected span");
  selected.forEach(item => {
    console.log(item.innerText);
    // Do what you need to each item here
  });
}

I just removed the id's and targeted the child span in the query selector.

发布评论

评论列表(0)

  1. 暂无评论