Adding a random background image in CSS using Javascript

Question

So I have a folder full of a bunch of gifs I want to use as the background for several elements on my page. I have a door animation on all of these elements and I want to have one of the random gifs display when the door is open. Previously I was just using one singluar image for all the elements like this:

HTML

<div class="door-position d1">
   <div class="door-back">
      <button class="door" data-date="11/01/2020">1</button>
   </div>
</div>

CSS

.door-back {
  height: 65px;
  width: 65px;
  border-radius: 50px;
  background-image: url("https://media4.giphy.com/media/8AdyAfsTMKi9QMaQ6n/giphy.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

But I was wondering if there is a innerHTML for your css page or if I should be just plugging them directly into my HTML? If that's the case, will my above style still impact that image? (height, width, size, etc.)

NOTE: the door transforms (opens) to reveal the image on the door-back property.

This was the JS I tried to impliment for what it's worth. This version I just tried having the image addresses in the JS file straight up:

HTML

<div class="door-position d1">
            <div class="door-back" >
              <button class="door" onClick="displayImg()" data-date="11/01/2020">1</button>
            </div>
          </div>

JS

const doorBackImg = document.querySelectorAll(".door-back");
const imgArr = [
  "https://media0.giphy.com/media/r3jTnU6iEwpbO/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6i&rid=200w.webp",
  "https://media4.giphy.com/media/phmwMLY1kkkMg/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6i&rid=200w.webp",
  "https://media0.giphy.com/media/bnH2hkYp97rGM/200.webp?cid=ecf05e478lhuvbydmjxp51r50rufqjcxj2x1v0g6kug4o86s&rid=200.webp",
];

function displayImg() {
  let randNum = Math.floor(Math.random() * imgArr.length);
  doorBackImg.innerHTML = `${imgArr[randNum]}`;
}

If you need any more code or information please let me know! I've not quite found what I'm looking for just yet and nothing I've tried has worked.

Cheers!

Answer 1

I'm not sure I get you right, but here one of my solutions. It works for one door.

 const doorBackImg = document.querySelector("#door-back"); const imgArr = [ "https://media0.giphy.com/media/r3jTnU6iEwpbO/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6i&rid=200w.webp", "https://media4.giphy.com/media/phmwMLY1kkkMg/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6i&rid=200w.webp", "https://media0.giphy.com/media/bnH2hkYp97rGM/200.webp?cid=ecf05e478lhuvbydmjxp51r50rufqjcxj2x1v0g6kug4o86s&rid=200.webp", ]; function displayImg() { let randNum = Math.floor(Math.random() * imgArr.length); doorBackImg.style.backgroundImage = `url(${imgArr[randNum]})`; }

 .door-back { height: 65px; width: 65px; border-radius: 50px; background-image: url("https://media4.giphy.com/media/8AdyAfsTMKi9QMaQ6n/giphy.gif"); background-position: center; background-repeat: no-repeat; background-size: cover; }

 <div class="door-position d1"> <div id="door-back" class="door-back"> <button onClick="displayImg()" class="door" data-date="11/01/2020">1</button> </div> </div>