So, I’m just messing around and seeing how far I can get into making a “memory game” All I’m trying to do at the moment is have it to where when I hit the start game button, all the images display will change to “none” after 3 seconds have passed. so, it’ll be just empty cards with no image
Now when I do this with ID’s it only targets the first image and the rest still stay on display “block” however it does at least work on that first image. I’m guessing it maybe only targets the first one because you can’t have the same ID on more than one element?
BUT
when I try to do it by class name it won’t even let me change the style/display at all.
What is the easiest way of doing this? I’m stumped
First of all, ids are supposed to be unique to the page they are on, so get rid of id="image".
To target all elements with the the same class name, you can read about the querySelectorAll method. It will return an array-like object that you can iterate through and perform the style change to the elements in it.
The name of the method also gives it away getElementById it is Element not Elements.
Even when you use querySelectorAll with an id selector it will just return the first element with that id. As said, you can use a class or an element type selector with querySelectorAll.
let gridContainer = document.getElementById('grid-container')
function startGame() {
let list = document.querySelectorAll('.image')
for ( i = 0; i < list.length; i++ ) {
list[i].style.display ='none'
}
}
startGame()
document.getElementById('start-button').addEventListener('click', function() {
setTimeout(startGame, 3000)
})
I mean I’m just trying anything at this point. I’m guessing you can’t just target an entire array with .style
It doesn’t seem to let me use .style.display on anything no matter what I do
EDIT* I’m reading that you can’t use .style on arrays at all. So I’m trying to come up with another solution
Also, I am not sure I understand why you are displaying all the images and then setting their display to none. Why not just start with all of them not being displayed when the app loads (using CSS)?
Having the images show and then disappear is kind of distracting from a user experience point of view.
I technically got it to work but I’m not happy with it. I don’t like that I have a giant block of code in my JS but I’m sure I’ll find a way to improve it!
I simply made to where the function changed the class from image to a new ID that displays “none”. It’s not my best work but it’ll do for now haha.
I ended up getting everything to work in a way that I’m prouder of!
it’s a little clunky but it is doing what I want it to do.
and also replying to Randel, the reason I’m having it start with display block and taking off the display 3seconds after game start is because I want them to see the images before the game starts and then they’re going to have to remember where they were once, they are taken away. I’m honestly just messing around and trying to get used to things I’m learning. I don’t like continuing to learn new things unless I can really grasp what I’ve learned.
I don’t like the fact that I’m guessing half the time trying to make things work. I want to have a solid understanding of why I’m doing what I’m doing. Not just guessing and crossing my fingers Haha.
I’m sure this is still an eye sore to look at for you guys but I’m making baby steps
let gridContainer = document.getElementById('grid-container')
let pokemonArray = ["blastoise.png", "charizard.png", "venosaur.png", "electabuzz.png", "voltorb.webp", "raichu.webp", "pika.png", "muk.webp", "arbok.png"]
function startGame() {
gridContainer.innerHTML = ''
for ( i = 0; i < pokemonArray.length; i++ ) {
newPokemon = ` <div class="grid-item"><img src="${pokemonArray[i]}" alt="" id="new-class"></div> `
gridContainer.innerHTML += newPokemon
}
}
document.getElementById('start-button').addEventListener('click', function() {
setTimeout(startGame, 3000)
})
My point is, calling an id new-class is confusing. The name doesn’t explain what it is and calling it a class when it is applied to an id is at best confusing.
Also, an id, as already explained, is supposed to be unique. You should not give the same id to more than one element.
I wasn’t really paying attention to names; I was just throwing stuff around trying to get it to work.
sometimes when I’m really just trying to get things to work my code gets sloppy and then I go back and fix it once I’ve gotten things settled. I know it’s a bad habit and I should stop .
