changing the src of a children element

Question

I have three buttons and each one has an image with an empty src. I'm trying to randomly change the image src when clicking each button and if I'm seeing this correctly the console tells me that the image is being generated when I click but I can't seem to have it shown on the browser and I don't really get why.

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>

Does this answer your question? [Load Image from javascript](https://stackoverflow.com/questions/19396390/load-image-from-javascript) — norbitrial, Mar 24 '20 at 16:26

score 1 · Answer 1 · answered Mar 24 '20 at 16:26

let image = this.children

The this.children refers to a collection of dom elements, not a single element; so you need to specify the first one in your case.

If there are multiple child nodes besides the image, you may wish to consider using querySelector('img') instead.

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>

score 0 · Answer 2 · answered Mar 24 '20 at 16:28

0

you could do something like this

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

this will loop through all of the children.

answered Mar 24 '20 at 16:28

mike510a

2,102
1
11
27

score 0 · Answer 3 · answered Mar 24 '20 at 16:39

this.children returns an array. You need to specify [0] to get the first one (only).

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>

score 0 · Answer 4 · answered Mar 24 '20 at 17:00

There are two main problems:

children is plural, but when you intend to change the src of an image, then it needs to be singular. children is array-like-object, while image is an element. No problem, children is an array-like-object which contains elements.
You have 4 elements, but you randomize 9. You need to be consistent with your upper limits.

Working code:

<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>

Fiddle: https://jsfiddle.net/p5hyvdzo/

changing the src of a children element

4 Answers4