Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Arshdeep Singh
Courses Plus Student 8,349 PointsHow to cycle through sections when clicking on a single button?
I need cycle through sections when clicking on same button. How we can achieve this with jQuery. I tried array but no luck.
<section id="one">This is section one</section>
<section id="one">This is section one</section>
<section id="one">This is section one</section>
<button class="button-bottom"></button>
5 Answers
Laurence Foley
16,695 PointsHow about this? http://codepen.io/anon/pen/vNYYpx
Chyno Deluxe
16,936 Points//Changed Comment to Answer
Arshdeep Singh
Courses Plus Student 8,349 PointsAwesome, I had my head scratching over this. It work great thanks a ton Laurence.
Laurence Foley
16,695 PointsNot sure if this is exactly what you are trying to achieve but Here's a JavaScript solution.
<div class="sections">
<section>
This is section 1
</section>
<section>
This is section 2
</section>
<section>
This is section 3
</section>
</div>
var sections = document.querySelectorAll(".sections section");
var btn = document.getElementById("btn");
var cycleSections = function() {
for (var i = 0; i < sections.length; i++) {
console.log(sections[i]);
}
}
btn.addEventListener("click", cycleSections);
Arshdeep Singh
Courses Plus Student 8,349 PointsThanks Laurence, there seems to be an issue with the last line of the code. Console is showing an error.
Laurence Foley
16,695 PointsWhat's the error? I've tested it in codepen and I am getting no errors, here is the link http://codepen.io/anon/pen/vNYYpx
Arshdeep Singh
Courses Plus Student 8,349 PointsUncaught TypeError: Cannot read property 'addEventListener' of null
Besides something seems a amiss here - as console.log you are requesting [i] which is an array. but there no defined array in the code. Script in Code Pen doesn't do much either.
Pardon me if I am missing something. Your insight is greatly appreciated.
Laurence Foley
16,695 Pointsif you click on the button it will log each section to the console. the array was defined in var sections = document.querySelectorAll(".sections section"); This gets all sections elements that are children of the .section element and then stores them in an array.
Arshdeep Singh
Courses Plus Student 8,349 PointsHello Chyno,
Below is my jQuery Code.
var ids = ["one", "two", "three", "four", "five" ];
var changeSections = function() {
for (var num = 1; num < ids.lenght; num++) {
document.getElementById(ids[num]);
num += 1;
}
}
$("button-bottom").click(function(){
// not sure what to do
});
Chyno Deluxe
16,936 Pointsfirst thing I noticed is you have a typo in ids.length.
Chyno Deluxe
16,936 Pointsare you trying to cycle through the list one by one?
Arshdeep Singh
Courses Plus Student 8,349 Pointsahahah, thankyou Chyno, I have sorted that out but the code is still not working. I am just novice at this. Please do help. Cheers
Arshdeep Singh
Courses Plus Student 8,349 PointsYes Chyno. That's exactly. I want one button to take the visitor to five different sections of the website on each click on by one. Button is fixed at the bottom on the view-port.
Chyno Deluxe
16,936 PointsChyno Deluxe
16,936 Points//Fixed Code Presentation
Can you please provide your jQuery.