if "x" is inside the 7x9 Grid then post "y"

Question

so i have a 7x9 Grid and each box inside that grid picks a random picture out of an array. now i want to "scan" the grid like : if "picture1" is already inside the 7x9 Grid then chose from picture 4,5,6 -if not then use picture1.

this is what i got so far.

let randomPic = ["../img/map1.jpg", "../img/map4.jpg", "../img/map5.jpg", "../img/map6.jpg"];
// map6 wird zu map2 wenn eingenommen
// map4 und map5 wird zu map3 wenn eingenommen
// map1 darf nur alle 7 felder 1mal vorkommen


let divs = document.querySelectorAll("div.box");
let divArray = Array.prototype.slice.call(divs);

divArray.forEach(function(div) {
  let randomNum = Math.floor(Math.random() * randomPic.length);
  div.style.backgroundImage = "url(" + randomPic[randomNum] + ")";
});

.container {
  display: inline-block;
  justify-content: center;
  display: flex;
}

.map {
  display: grid;
  grid-template-columns: repeat(7, 59px);
  grid-template-rows: repeat(9);
  grid-gap: 2px;
  background: rgb(53, 31, 3);
  border: 3px solid rgb(53, 31, 3);
  position: relative;
  top: 50px;
}

.box {
  width: 58px;
  height: 42px;
}

<div class="container">
  <!-- 7x9 map -->
  <div class="map">
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
    <div class="box" id=""></div>
  </div>
</div>

i hope i explained what i mean good enough.

thnxs.

Answer 1

This should go:

let randomPic = ["../img/map1.jpg", "../img/map4.jpg", "../img/map5.jpg", "../img/map6.jpg"];
// map6 wird zu map2 wenn eingenommen
// map4 und map5 wird zu map3 wenn eingenommen
// map1 darf nur alle 7 felder 1mal vorkommen

let divs = document.querySelectorAll("div.box");
let divArray = Array.prototype.slice.call(divs);

let imgSelected = false;

divArray.forEach(function(div) {
    if(!imgSelected) {
      let randomNum = Math.floor(Math.random() * randomPic.length);
      div.style.backgroundImage = "url(" + randomPic[randomNum] + ")";
      if (randomNum === 0) imgSelected = true; 
    } else {
      let filteredArray = randomPic.slice(1);
      let randomNum = Math.floor(Math.random() * filteredArray.length);
      div.style.backgroundImage = "url(" + filteredArray[randomNum] + ")";
    }
  });