How would I apply a toggle function to one image in a div onclick in a div that contains multiple images?

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x