La longueur de la collection HTML est zéro. Impossible de le convertir en tableau. Handlebars.js

Question

J'ai remplacé le contenu de mon fichier html par un modèle de guidon. Maintenant, j'ai ce js Code

function init() { 
    var elements = document.getElementsByTagName('li'); 
    console.log("before click"); 
    console.log(elements); 
    pullData(); 
    var arr = [].slice.call(elements); 
    console.log(arr); 

    for (var i = 0; i < arr.length; i++) { 
     console.log("before click"); 
     arr[i].addEventListener("click", function() { 
      console.log("after click"); 
      for (var j = 0; j < arr.length; j++) { 
       arr[j].classList.remove('selected', 'no-hover'); 
      } 
      var contentList = document.querySelectorAll('.show'); 
      console.log(contentList); 
      for (var k = 0; k < contentList.length; k++) { 
       contentList[k].classList.remove('show'); 
      } 
      document.getElementById('right').style.display = 'block'; 
      var id = this.id; 
      console.log(id); 
      var targetElements = document.querySelectorAll('.' + id); 
      console.log(targetElements); 
      for (var x = 0; x < targetElements.length; x++) { 
       targetElements[x].classList.add('show'); 
      } 
      this.classList.add('selected', 'no-hover'); 
     }); 
    } 
} 

qui fonctionnait très bien avant d'utiliser de modèle du guidon, car il rentrait Nodelist, j'ai pu itérer sur les éléments et ajoutez un clic à chaque élément. Après avoir utilisé le guidon, mon elements est un HTMLcollection, que j'ai essayé de convertir en tableau, mais je reçois un tableau vide.

J'ai les questions suivantes. Est-ce que le guidon est à l'origine de cette modification? (Retourne HTMLcollection au lieu de la liste des nœuds) Ou est-ce que je ne fais que connecter deux choses distinctes? Pourquoi est-ce que j'obtiens un tableau vide?

Answer 1

Donc, j'ai résolu cela avec un peu d'aide.

La raison pour laquelle j'obtenais un tableau vide était parce que mon code JS essayait de convertir le HTMLcollection avant que le guidon soit construit.

J'ai vérifié cela en affichant la longueur de la collection HTML qui sortait comme zéro. Tout ce que je devais faire pour résoudre ce problème était de faire en sorte que je convertisse la collection en un tableau après que le modèle de guidon ait été fait avec son processus.