使用getElementsByClassName的HTML Javascript setTimeout，包含多个元素

Question

I have some php code to echo a list of files in a directory. It works fine, but then I need to use Javascript to hide them after 5 seconds, but for some reason the script doesn't work. Do you know what I need to fix?

 $dir = "/var/www/files/";
    $list = preg_grep('/^([^.])/', scandir($dir));
    foreach (preg_grep('/^([^.])/', scandir($dir)) as $list)
    echo "<span class='list' style='color:red'>$list</span>"."<br>";
    echo "<script>
           setTimeout(function () {
           document.getElementsByClassName('list').style.display='none';}, 5000);
           </script>";

Answer 1

I think the problem has to do with trying to manipulate the return value of document.getElementsByClassName. The object returned from this method call is an HTMLCollection, which is array-like and definitely not an HTMLElement.

You will want to loop over your collection and then do the ELEMENT.style.display = 'none'; call. Currently the way you have it set up is more of a jQuery style operation, where calling .style.display = 'none' applies to each element of the collection, but because you're doing vanilla JavaScript, you have to do it manually.

In your JavaScript I would do something like this:

const collection = document.getElementsByClassName('list');
[ ...collection ].forEach(element => {
    element.style.display = 'none';
});

I did the [ ...collection ] deal because an HTMLCollection doesn't have native array methods, and so to avoid using a for loop I made it an array (oddly, it has a Symbol.iterator property, so it's easy to convert to an array.