✅ – ✅ – ✅ – Ygg – 21-49 Oct 31
Hello everyone
I'm making a Pokedex using PokeAPI
I'm trying to add
addEventListener('click', ...)
to every Pokémon element so I can use it to open a Modal with the detailed Pokémon info
As I'm fetching info from the API, I'm getting errors. I can't seem to find a way to add those eventListeners after the fetch
I googled it for hours and was reading about callbacks and async/await, but coudn't make it work...
I even tried to use a global "reader" to see if any fetch is completed in the page and managed to console.log every entry after they finish fetch, unsuccesful
The code in Screenshot is pretty much all JS code I have
Any help?9 Replies
Errors like empty string or the Click effect simply not working
Empty arrays happens when I use querySelector, nothing happens when I use getElementByClassName
Sorry, I'll add the code again, it's a really simple for loop using the
pokeCardList
Sorry about the delay and about the missing code, I tried to use that
I also removed de dot at getElementsByClassName(".pokemon");
It was an attempt to make it work with querySelector
The loop you're talking about is the .map
at loadPokeCards
?
I'm failing to see how can I add the event inside of it while calling it
I know that this is really basic but is so abstract that my head is just spinnig right now weird to be able to make this easily with React but when I go to the fundamentals I see I'm just a lil potato
I'll read it carefuly
Usage
I trust you to figure things out, hope it helps
Sorry, didn't saw your message before trying out today did it by myself today and achieve the same UI I had before with this
The event listener finally worked as I wanted
But then comes the question... is there a better way to do it rather than doing it step by step? I could try to make a function to create new elements like @Liil' Boo sugested, but is it the best way? I'm only asking because I had experience with React before and doing the opposite way going back to JS make it looks like I'm typing a lot Wich is not a big deal, just wondering how I could improve this also, I couldn't figure out how to make the types without
But then comes the question... is there a better way to do it rather than doing it step by step? I could try to make a function to create new elements like @Liil' Boo sugested, but is it the best way? I'm only asking because I had experience with React before and doing the opposite way going back to JS make it looks like I'm typing a lot Wich is not a big deal, just wondering how I could improve this also, I couldn't figure out how to make the types without
innerHTML
, is this okay?
It's a utility function
I'll see your thing and propose something in about an hour
(small refactoring suggestion for readibility - I'm not questioning what you are doing)
This is what it would look like with the suggestion, it would be more maintainable
That's all for me. Good luck
Thank you very much for your time and Subone :3
This question has an answer! Thank you for helping 😄
If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1036758918820544592
This question has an answer! Thank you for helping 😄
If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1036758918820544592
This question has an answer! Thank you for helping 😄
If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1036758918820544592
Damn, not a question but I realized that I could just create the
<article>
with .createElement
and then add the rest with .innerHTML
Much easier to work than trying to abstract everything for the sake of reference in case anyone come here, it looks like this now 😄
This thread hasn’t had any activity in 12 hours, so it’s now locked.
Threads are closed automatically after 12 hours. If you have a followup question, you may want to reply to this thread so other members know they're related. https://discord.com/channels/102860784329052160/565213527673929729/1036758918820544592