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>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>