HTML Javascript setTimeout с несколькими элементами, используя getElementsByClassName

Question

У меня есть некоторый php-код для отображения списка файлов в каталоге. Это работает нормально, но затем мне нужно использовать Javascript, чтобы скрыть их через 5 секунд, но по какой-то причине скрипт не работает. Вы знаете, что мне нужно исправить?

 $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

Я думаю, что проблема связана с попыткой манипулировать возвращаемым значением document.getElementsByClassName. Объект, возвращаемый этим вызовом метода, является HTMLCollection, который похож на массив и определенно не HTMLElement.

Вы захотите перебрать свою коллекцию, а затем выполнить вызов ELEMENT.style.display = 'none';. В настоящее время он настроен в большей степени как операция в стиле jQuery, где вызов .style.display = 'none' применяется к каждому элементу коллекции, но поскольку вы выполняете ванильный JavaScript, вам придется делать это вручную.

В вашем JavaScript я бы сделал что-то вроде этого:

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

Я заключил сделку [ ...collection ], потому что HTMLCollection не имеет собственных методов массива, и поэтому, чтобы избежать использования цикла for, я сделал его массивом (странно, у него есть свойство Symbol.iterator, так что это легко преобразовать в массив.