onclick random div background-images

Question

I can't figure out how to change 4 divs with the same background-image to another random image by clicking on either on of the div backgrounds. In my script only one image changes.

I have tried with document getElementByClassName and changed the ID to class but that did not work at all. I tried with multiple IDs eg box1-random1, box2-random2 and added that in js but it did not work neither...

<div class="wrapper" id="my-button">
  <div class="box1" id="random"></div>
  <div class="box2" ></div>
  <div class="box3" ></div>
  <div class="box4" ></div>
</div>


.box1 {
  background-position: 0% 100%;
}
.box3 {
  background-position: 0% 100%;
}
.box2 {
  background-position: 100% 0%;
}
.box4 {
  background-position: 100% 0%;
}
.box1, .box2, .box3, .box4 {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("http://lorempixel.com/800/800/cats/6");
}


var myData = {
    1: {
        imageUrl:"http://lorempixel.com/800/800/cats/4",
        text: "This is the text for image 1"
    }, 
    2: {
        imageUrl: "http://lorempixel.com/800/800/cats/4",
        text: "This is the text for image 2"
    }, 
    3: {
        imageUrl: "http://lorempixel.com/800/800/cats/4",
        text: "This is the text for image 3"
    }, 
    4: {
        imageUrl: "http://lorempixel.com/800/800/cats/4",
        text: "This is the text for image 4"
    }, 
    5: {
        imageUrl: "http://lorempixel.com/800/800/cats/5",
        text: "This is the text for image 5"
    }, 
    6: {
        imageUrl: "http://lorempixel.com/800/800/cats/6",
        text: "This is the text for image 6"
    }, 
    7: {
        imageUrl: "http://lorempixel.com/800/800/cats/7",
        text: "This is the text for image 7"
    }, 
    8: {
        imageUrl: "http://lorempixel.com/800/800/cats/8",
        text: "This is the text for image 8"
    }, 
    9: {
        imageUrl: "http://lorempixel.com/800/800/cats/9",
        text: "This is the text for image 9"
    }, 
    10: {
        imageUrl: "http://lorempixel.com/800/800/cats/10",
        text: "This is the text for image 10"
    }
};
function changeImage(){
    var randomNumber = Math.floor((Math.random() * 10) + 1);
    document.getElementById("random").style.background = "url('"+myData[randomNumber].imageUrl+"')";
    document.getElementById("text").innerHTML = myData[randomNumber].text;    
}
document.getElementById("my-button").addEventListener("click",changeImage);

`

Answer 1

change your function like this:

function changeImage(){
    var divs = document.querySelectorAll(".wrapper > div");
    var randomNumber = Math.floor((Math.random() * 10) + 1);
    for(var i=0; i<divs.length; i++){
        divs[i].style.background = "url('"+myData[randomNumber].imageUrl+"')";
        divs[i].innerHTML = myData[randomNumber].text;    
    } 
}