@dev-mksingh
Posted
Hey @dknyd , nice try, but click functionality is not working. When you click on any particular country it should open the details of that individual. Make sure you have assigned click functionality and relevant event listener/event handler to it. If you have any doubt or something you can ask me. And if you won't be able to fix let me know. I will go through your code.
Hope this will be helpful. Happy coding
Marked as helpful
@dknyd
Posted
hey @dev-mksingh!
Many thanks for the comment and noticing the error, I actually had a hard time implementing the click function, because -due to the fact that the cards are generated dynamically-, I could not figure out how to attach the function to them, as by the time I selected them, they did not yet exist (I am a beginner at async at the moment).
My solution was setting up a setTimeout as below -originally was 100 ms, I now changed to 2000-:
On my side the click functions works now, I hope on yours too!
const containerPreviews = document.querySelectorAll('.container__preview');
containerPreviews.forEach (country => country.addEventListener('click', function() {
console.log('I have been clicked!' + this.id);
getDetailedData(this.id)
}))
}
//For some reason, if I only use DOMContentload without setTimeOut , it can not find any elements in containerPreviews, so I added this absolutely not elegant SetTimeOut solution
document.addEventListener('DOMContentLoaded', function() {
setTimeout(() => {
addFunction();
}, 2000);
}) ```
