Tengo varias imágenes encima de otras imágenes. Al hacer clic en Imagen, debería ocurrir una función de alternar que le dé a la imagen superior una opacidad de 0 y, por lo tanto, revele la imagen subyacente. Quiero que esto se aplique a una sola imagen al hacer clic. El problema es que, al hacer clic, la función de alternar ha estado eliminando todas las imágenes principales del div a la vez. Intenté volver a escribir el código en un intento de acceder al elemento secundario en el div, es decir, la imagen única, pero esto tampoco funciona.
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>También te falta un punto en tu ":scope > Card_Rear"
Prueba la delegación
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>