изменение sr c дочернего элемента

Question

У меня три кнопки, и у каждой есть изображение с пустым src. Я пытаюсь случайным образом изменить изображение src при нажатии каждой кнопки, и, если я вижу это правильно, консоль сообщает мне, что изображение создается при нажатии, но я не могу показать его в браузере. и я не понимаю почему.

const images = 
    ["https://i.picsum.photos/id/102/60/60.jpg","https://i.picsum.photos/id/1024/60/60.jpg", 
     "https://i.picsum.photos/id/1062/60/60.jpg","https://i.picsum.photos/id/1069/60/60.jpg"];

  const buttons = document.querySelectorAll("button");

       buttons.forEach(function(el){  el.addEventListener("click", card);   })

       function card(){
           let random = Math.floor( Math.random() * 9);
           let image = this.children;
               console.log(image);
           image.src = images[random];
               console.log(image.src);    }

  <div>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>      
   </div>

Answer 1

let image = this.children

this.children относится к коллекции элементов dom, а не к одному элементу; поэтому вам нужно указать первый в вашем случае.

Если есть несколько дочерних узлов, кроме изображения, вы можете sh рассмотреть возможность использования querySelector('img') вместо.

const images = 
    ["https://i.picsum.photos/id/102/60/60.jpg",
    "https://i.picsum.photos/id/1024/60/60.jpg",
    "https://i.picsum.photos/id/1062/60/60.jpg",
    "https://i.picsum.photos/id/1069/60/60.jpg"];

const buttons = document.querySelectorAll("button");

buttons.forEach(el => el.addEventListener("click", card))

function card() {
  const randomImageUrl = images[Math.floor(Math.random() * images.length)];
  const image = this.children[0];
  image.src = randomImageUrl;
  console.log(image.src);
}

<div>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>      
   </div>

Answer 2

Есть две основные проблемы:

1. children - это множественное число, но когда вы намереваетесь изменить src изображения, оно должно быть в единственном числе. children - это объект, похожий на массив, а image - это элемент. Нет проблем, дочерние элементы - это объекты, похожие на массивы, которые содержат элементы.
2. У вас есть 4 элемента, но вы случайным образом выбираете 9. Вы должны соответствовать верхним пределам.

Рабочий код:

<div>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>      
   </div>

<script type="text/javascript">
const images = 
    ["https://i.picsum.photos/id/102/60/60.jpg","https://i.picsum.photos/id/1024/60/60.jpg", 
     "https://i.picsum.photos/id/1062/60/60.jpg","https://i.picsum.photos/id/1069/60/60.jpg"];

  const buttons = document.querySelectorAll("button");

       buttons.forEach(function(el){  el.addEventListener("click", card);   })

       function card(){
           let random = Math.floor( Math.random() * 4);
           let image = this.children[0];
               console.log(image);
           image.src = images[parseInt(random)];
               console.log(image.src);    }
</script>

Скрипка: https://jsfiddle.net/p5hyvdzo/

Answer 3

this.children возвращает массив. Вам нужно указать [0], чтобы получить первый (только).

const images = 
    ["https://i.picsum.photos/id/102/60/60.jpg","https://i.picsum.photos/id/1024/60/60.jpg", 
     "https://i.picsum.photos/id/1062/60/60.jpg","https://i.picsum.photos/id/1069/60/60.jpg"];

  const buttons = document.querySelectorAll("button");

       buttons.forEach(function(el){  el.addEventListener("click", card);   })

       function card(){
           let random = Math.floor( Math.random() * 9);
           let image = this.children;
               console.log(image);
           image.src = images[random];
               console.log(image.src);    }

  <div>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>      
   </div>

const images = 
    ["https://i.picsum.photos/id/102/60/60.jpg","https://i.picsum.photos/id/1024/60/60.jpg", 
     "https://i.picsum.photos/id/1062/60/60.jpg","https://i.picsum.photos/id/1069/60/60.jpg"];

  const buttons = document.querySelectorAll("button");

       buttons.forEach(function(el){  el.addEventListener("click", card);   })

       function card(){
           let random = Math.floor( Math.random() * 4);
           console.log(this.children);
           let image = this.children[0];
               console.log(image);
           image.src = images[random];
               console.log(image.src);    }

<div>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>
       <button type="button"><img src="" alt=""></button>      
   </div>

Answer 4

вы могли бы сделать что-то вроде этого

this.querySelectorAll("img").forEach(function(img) { img.src = images[random] });

это будет l oop через всех детей.