How would I apply a toggle function to one image in a div onclick in a div that contains multiple im-CodePudding

I have multiple images on top of other images. On Image click a toggle function should happen that gives the top image an opacity of 0 and thus reveals the underlying image. I want this to apply to a single image on click. The problem is that on click the toggle function has been removing all of the top images from the div at once. I have tried re-writing the code in an attempt to access the child element in the div, i.e the single image but this doesn't work either.

function shuffle(array) {
  let currentIndex = array.length,
    randomIndex;

  while (currentIndex != 0) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]
    ];
  }

}
const images$Rear = [{
    name: "rear.1a",
    img: "rear.1a.png",
  },
  {
    name: "rear.1b",
    img: "rear.1b.png",
  },
  {
    name: "rear.2a",
    img: "rear.2a.png",
  },
  {
    name: "rear.2b",
    img: "rear.2b.png",
  },
]


shuffle(images$Rear)

let click4RearImage = document.querySelector("#StartButton");
click4RearImage.addEventListener("click", DisplayRearImage);

function DisplayRearImage(k) {
  let rearImage = document.createElement('img');
  rearImage.src = `Images/${images$Rear[k].img}`;
  document.querySelector("#cardsRear").appendChild(rearImage);
  rearImage.addEventListener("click", function(e) {
    console.log(e.target.src);
  })
}


let thisCard = document.querySelector('#cardsRear');
let allChildren = thisCard.querySelectorAll(":scope > Card_Rear")
for (let z = 0; z < thisCard.length; z  ) {
  thisCard[z].addEventListener('click', function() {
    allChildren.forEach(item => item.classList.toggle('is-flipped'));
  });
}
console.log(allChildren);

.Card_Rear .is-flipped {
  opacity: 0;
}

<div class="flex_container_start-button"> <button type="button" class="btn btn-primary" id="StartButton">Click to Begin</button> </button>
</div>
<div class="flex_container_board" id="Game_Board">
  <div class="Our-Card" id="ourCard">
    <div class="Card_Front" id=cardsFront></div>
    <div class="Card_Rear" id=cardsRear></div>
  </div>
</div>

CodePudding user response：

You are missing a dot too in your ":scope > Card_Rear"

Try delegation

function shuffle(array) {
  let currentIndex = array.length,
    randomIndex;

  while (currentIndex != 0) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]
    ];
  }

}
const images$Rear = [{
    name: "rear.1a",
    img: "https://picsum.photos/id/0/367/267",
  },
  {
    name: "rear.1b",
    img: "https://picsum.photos/id/1/367/267",
  },
  {
    name: "rear.2a",
    img: "https://picsum.photos/id/2/367/267",
  },
  {
    name: "rear.2b",
    img: "https://picsum.photos/id/3/367/267",
  },
]





let click4RearImage = document.querySelector("#StartButton");
click4RearImage.addEventListener("click", DisplayRearImage);

function DisplayRearImage() {
  shuffle(images$Rear)
  console.log(images$Rear[0].img)
  let rearImage = document.createElement('img');
  rearImage.alt = images$Rear[0].name
  rearImage.src = `${images$Rear[0].img}`;
  document.querySelector("#cardsRear").appendChild(rearImage);
}


document.querySelector('#cardsRear').addEventListener("click", function(e) {
  const tgt = e.target
  if (tgt.closest('div').classList.contains("Card_Rear")) {
    tgt.classList.toggle('is-flipped')
  }
})

.Card_Rear {
  opacity: 1;
}
.Card_Rear .is-flipped {
  opacity: 0;
}

<div class="flex_container_start-button"> <button type="button" class="btn btn-primary" id="StartButton">Click to Begin</button> </button>
</div>
<div class="flex_container_board" id="Game_Board">
  <div class="Our-Card" id="ourCard">
    <div class="Card_Front" id=cardsFront>Front</div>
    <div class="Card_Rear" id=cardsRear>Rear</div>
  </div>
</div>