CODEWITHSUNDEEP
javascripthtmlarrays
kawnah
kawnah

Reputation: 3424

Array of HTML elements is undefined

want to take a list of elements using document.querySelectorAll() and convert it to an array of data (specifically, the text in each <h3> tag). I'm doing this through a loop and I want to push it to an array. I'm trying to do it like so:

function pushArray(e){
  var filterItems = document.querySelectorAll('.filter-title');
  var filterItemsTitle = filterItems.innerHTML;
  var arr = [];
  for (var i = 0; i < filterItems.length; i++) {
    arr.push(filterItemsTitle);
    console.log(arr)
  }
}
<section class="authors-titles">
      <div class="filter-item">
        <div class="filter-item">
          <h3 class="filter-title">title 1</h3>
          <h3 class="filter-title">title 2</h3>
          <h3 class="filter-title">title 3</h3>
        </div>
      </div>
      <div class="filter-item">
        <div class="filter-item">
          <h3 class="filter-title">title 4</h3>
          <h3 class="filter-title">title 5</h3>
          <h3 class="filter-title">title 6</h3>
        </div>
      </div>
</section>

<button onClick="pushArray()">Push to Array in Console</button>

This is what I don't understand:

In the stack snippet, you'll see everything is undefined - Why? Is it because I'm not pushing the right value to the array? I want the titles though, and that's what I'm passing into the array so isn't that what the values should be?

I'm also having a hard time understanding why I'm getting multiple arrays. I just want a single array. I'm confused here.

Upvotes: 0

Views: 381

Answers (2)

davidxxx
davidxxx

Reputation: 131526

filterItems.innerHTML is undefined as filterItems is an array and so doesn't contain an innerHTML property.

innerHTML is defined for HTML elements such as :

<h3 class="filter-title">title 1</h3>

So refer the property for these elements : 

function pushArray(e){
  var filterItems = document.querySelectorAll('.filter-title');
  var arr = [];
  for (var i = 0; i < filterItems.length; i++) {
    const innerHtml = filterItems[i].innerHTML;
    arr.push(innerHtml);
  }
}

Upvotes: 0

Barmar
Barmar

Reputation: 782498

filterItems.innerHTML doesn't return anything. filterItems is a collection, not a specific element, so it doesn't have any innerHTML. You need to use filterItems[i].innerHTML in the loop.

function pushArray(e) {
  var filterItems = document.querySelectorAll('.filter-title');
  var arr = [];
  for (var i = 0; i < filterItems.length; i++) {
    arr.push(filterItems[i].innerHTML);
  }
  console.log(arr)
}
<section class="authors-titles">
  <div class="filter-item">
    <div class="filter-item">
      <h3 class="filter-title">title 1</h3>
      <h3 class="filter-title">title 2</h3>
      <h3 class="filter-title">title 3</h3>
    </div>
  </div>
  <div class="filter-item">
    <div class="filter-item">
      <h3 class="filter-title">title 4</h3>
      <h3 class="filter-title">title 5</h3>
      <h3 class="filter-title">title 6</h3>
    </div>
  </div>
</section>

<button onClick="pushArray()">Push to Array in Console</button>

Upvotes: 3

Related Questions