Javascript дает мне неправильное имя изображения из списка php

Question

Итак, я новичок в JavaScript, и я не знаю, почему это дает мне неправильное изображение src.На самом деле это дает мне только источник первого изображения из списка php.

Вот мой код:

<php
  $files = glob("./images/*.*");
     for ($i=0; $i<count($files); $i++)
      {
        $image = $files[$i];
        $supported_file = array(
                'gif',
                'jpg',
                'jpeg',
                'png'
         );

         $ext = strtolower(pathinfo($image, PATHINFO_EXTENSION));
         if (in_array($ext, $supported_file)) {

            echo '<a target="_self">';
      echo '<img src="'.$image .'" onclick="list();" id="img" style="width:100px; margin-right: 10px; margin-bottom: 10px;" class="hover-shadow cursor" alt="Random image">';
            echo '</a>';
            } else {
                continue;
            }
          }

   ?>
<script>
function list(){
     var pic = document.getElementById("img").src;
     alert(pic);
} </script>

Answer 1

Вы используете html id атрибут для получения имени изображения, id означает уникальный. Но здесь все ваши идентификаторы изображений одинаковы, поэтому вам нужно назначить уникальный идентификатор для каждого элемента.И измени свой код следующим образом

 <?php
 $files = glob("./images/*.*");
 for ($i=0; $i<count($files); $i++)
 {
  $image = $files[$i];
  $supported_file = array(
                    'gif',
                    'jpg',
                    'jpeg',
                    'png'
  );

  $ext = strtolower(pathinfo($image, PATHINFO_EXTENSION));
  if (in_array($ext, $supported_file)) {
  echo '<a target="_self">';
  echo '<img src="'.$image .'" onclick="list(this);" id="img" style="width:100px; margin- 
  right: 10px; margin-bottom: 10px;" class="hover-shadow cursor" alt="Random image">';
  echo '</a>';
 } else {
   continue;
 }
}

?>
 <script>
    function list(img){
         var pic = img.src;
         alert(pic);
    }
</script>

Answer 2

Атрибут id должен быть уникальным для каждого элемента на странице.Здесь у вас есть куча изображений с одинаковым id, и код выбирает первое.Не делайте этого.

Вместо этого выберите изображения, используя querySelectorAll, например:

let images = document.querySelectorAll("img");

В качестве альтернативы, если вы хотите выбрать только несколько изображений, присвойте им class="selectable"атрибут в вашем php-коде, а затем выберите их, используя:

let images = document.querySelectorAll(".selectable");

Это даст вам массив всех изображений на странице.Теперь вы можете перебирать его так:

for (const pic of images) {
  alert(pic.src);
}

В любом случае, не располагайте два или более элементов на странице с одинаковым id, что только создаст вам проблемы.