Design comparison
Solution retrospective
I'd like some help for the Javascript part. I can make the second slider appear and the first one disappear, but I can't make the first one appear again.
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const testimonialOne = document.querySelector('.One');
const testimonialTwo =document.querySelector('.testimonial-2');
function nextTest() {
next.addEventListener('click', function() {
testimonialTwo.classList.remove('hidden');
testimonialOne.classList.add('hidden');
})
}
function PreviousTest() {
prev.addEventListener('click', function() {
testimonialTwo.classList.add('hidden');
testimonialOne.classlist.remove('hidden');
})
}
nextTest();
PreviousTest();
Community feedback
- @visualdennissPosted 6 months ago
Salut Marie,
first of all, there is a typo inside ur second func: testimonialOne.classlist.remove('hidden'); it should be classList, which causes the problems.
Secondly there is no need to wrap ur eventlisteners into a function just to call them. Also, it's better practice to set up your event listeners outside of the function definitions, ensuring they are added when the DOM is fully loaded, smth like so:
const prev = document.querySelector(".prev"); const next = document.querySelector(".next"); const testimonialOne = document.querySelector(".One"); const testimonialTwo = document.querySelector(".testimonial-2");
function nextTest() { testimonialTwo.classList.remove("hidden"); testimonialOne.classList.add("hidden"); }
function previousTest() { testimonialTwo.classList.add("hidden"); testimonialOne.classList.remove("hidden"); }
// Set up event listeners
next.addEventListener("click", nextTest);
prev.addEventListener("click", previousTest);
Hope this helps! :)
Marked as helpful1@MarieG41Posted 6 months ago@visualdenniss thank you very much for your help. My code is working!
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord