Currently, I am working on a coding project where I am attempting to create a flip box that reveals the name of a superhero from an array when clicked by a user. The code pen link provided showcases my progress so far: https://codepen.io/zakero/pen/YmGmwK.
The code functions as expected with the use of alert() in the code pen example. It randomizes and displays a superhero name each time a square is clicked. However, my goal is to have the result displayed after the square is clicked and flipped. Instead of showing "Back", I want it to reveal one of the random superhero names. I've attempted to achieve this by using both .textContent and .innerHTML methods but have been unsuccessful. Here is the snippet of code I've tried:
Javascript:
function setupSquares() {
for(var i = 0; i < frontSquare.length; i++) {
frontSquare[i].addEventListener("click", function() {
var randomNumber = frontSquare[i] = generateRandomNumbers(numbers);
for(var j = 0; j < superhero.length; j++) {
var index = superhero.indexOf(superhero[j]);
if(randomNumber === index){
backSquare.textContent = superhero[j];
}
}
});
}
}