document.querySelector只能读取1个类

Question

The document.getElementById is executing only the first <ul> when I click, I want all the ul 's working as I click inside them.

PHP

for ($i=0; $i < $Count_Assoc['dev'] ; $i++) { 

  $History_Assoc = mysqli_fetch_array($HistoryQuery);

  echo '<ul class="repoFolder" data-value="'. $History_Assoc['devaddr'] .'">';
  echo '<br>';

  echo '<h5 style=" color: black;
  padding: 0px 9em 0em 0em;">DevAddr:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspData:</h5>';
  echo '<p>'.$History_Assoc['devaddr'].'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'.$History_Assoc['data'].'</p>';

  echo "</ul>";
  echo '<br>';

}

Javascript

document.querySelector('.repoFolder').onclick = function() {rootFolder()};

function rootFolder() {
  alert(document.querySelector('.repoFolder').getAttribute('data-value'));
}

Answer 1

You should set the class on your lists, rather than the Id. Id is supposed to be a unique identifier, but class is a way to can create multiple common elements. Here I have changed your ids into classes

for ($i=0; $i < $Count_Assoc['dev'] ; $i++) { 

  $History_Assoc = mysqli_fetch_array($HistoryQuery);

  echo '<ul class="repoFolder" data-value="'. $History_Assoc['devaddr'] .'">';
  echo '<br>';

  echo '<h5 style=" color: black;
  padding: 0px 9em 0em 0em;">DevAddr:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspData:</h5>';
  echo '<p>'.$History_Assoc['devaddr'].'&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp'.$History_Assoc['data'].'</p>';

  echo "</ul>";
  echo '<br>';

}

And JavaScript:

var folders = document.getElementsByClassName("repoFolder");
for (let i = 0; i < folders.length; i++) {
  folders[i].onclick = function() {rootFolder.call(this)}; // note that I am passing in the context to rootFolder. 
}

function rootFolder() {

  alert(this.getAttribute('data-value'));

}

Answer 2

You can use querySelectorAll to select all element with a class repoFolter and loop through each element and append the eventListener

var elements = document.querySelectorAll('.repoFolder');
elements.forEach(function(el){
    el.addEventListener('click', rootFolder);
})

function rootFolder( ){ ... }

Answer 3

From w3schools.com

The querySelector() method returns the first element that matches a specified CSS selector(s) in the document.

If you want to get all the elements with specific class or name:

document.getElementsByClassName("text").onclick = function () {
    alert("Called");
}