I cant navigate through sections

[DangerXbeart]

HI guys. I have a problem that I cant navigate through pages with buttons.
I have checked my js file for thousand times and it still doesn't work.
Also I receive <TypeError: allSections.addEventListener is not a function> this error.
I would appreciate if some one help.

` //sections active class
allSections.addEventListener('click' , (e) => {
const id=e.target.dataset.id;
if(id){
//remove selected from the other btns
sectBtns.foreach((btn) =>{
btn.classlist.remove('active');
})
e.target.classlist.add('active');

		//hide other sections
		sections.foreach((section)=>{
			section.classlist.remove('active');
		})
		const element = document.getElementById(id);
		element.classlist.add('active');
		}
	});
`

[lalabrus1995]

Have you found an answer to this issue? I just found this tutorial and I stumbled on the same issue

[DangerXbeart]

Le jeu. 4 août 2022 à 11:16 PM, lalabrus1995 ***@***.***> a écrit :

Have you found an answer to this issue? I just found this tutorial and I stumbled on the same issue — Reply to this email directly, view it on GitHub <#9 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYG43YTL2YN4J5PBVHQJYIDVXQF2BANCNFSM52TP4OHQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

Unfortunately, no! But with a simple search on youtube you can find out how it was done. If you found anything related to this issue of scrolling i would appreciate if you could share it with me too!

[lalabrus1995]

Will do... :) Thanks

[lalabrus1995]

Hi! if anyone's having an issue with this like I was... another viewer had answered this problem on the comment section for the video.
My issue was that I didn't have full understanding of how 'allSections' was supposed to register.
--const allSections = document.querySelectorAll('.main-content')[0]; --
once you change the allSections to the code above adding the [0] at the end the .addEventListener will work as intended.

[amarantak]

To me it worked to copy and paste the new js code in the project.

[BriInTech]

i had the same problem as well it didn't work for me adding the zeros. I just deleted everything and retyped the code fro the function page transitions () {

function PageTransitions(){
//Button click active class
for (let i = 0; i < sectBtn.length; i++){
sectBtn[i].addEventListener('click', function(){
let currentBtn = document.querySelectorAll('.active-btn');
currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
this.className += ' active-btn';
})
}
}

PageTransitions();

[Dyrits]

To me it worked to copy and paste the new js code in the project.

Yes, I recommend people to read the README.md on this page: https://github.com/Dyrits/PORTFOLIO/tree/main-fork-update
Some of the changes I've made here I've been added to the project, so it is not exactly the same as the video on YouTube.

The original code is available here: https://github.com/Maclinz/JS_CSS_PortfolioProject/tree/1f1c0205c0b3a8caa623c96402775974f39ab5cb

[hakunamatata97k]

@Dyrits could you figure out how to achieve full-page scroll? I liked your version and have been working on achieving that for hours and still no progress! Could you please give me some tips?
I have tried the overflow: scroll; but it didn't help :(

[Dyrits]

You want to scroll from a section to another ?

[DangerXbeart]

On Mon, May 1, 2023 at 8:22 PM hakunamatata97k ***@***.***> wrote: @Dyrits <https://github.com/Dyrits> could you figure out how to achieve full-page scroll? I liked your version and have been working on achieving that for hours and still no progress! Could you please give me some tips? I have tried the overflow: scroll; but it didn't help :( — Reply to this email directly, view it on GitHub <#9 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYG43YVEXMTI7WS4P5DKWXDXD7S5FANCNFSM52TP4OHQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

Hi dude! I'm not the developer of this source code also I haven't coded front end lately that it's been almost 1 year! I have no clue how to fix this problem! Sorry to say that but ask others!

[Dyrits]

The best way would be to set margin: 1px 0; or padding to the body or increase the min-height, in order to allow some scrolling. Then you add an even and check the window.scrollY to setup a change to the next section.

[Dyrits]

@Dyrits could you figure out how to achieve full-page scroll? I liked your version and have been working on achieving that for hours and still no progress! Could you please give me some tips? I have tried the overflow: scroll; but it didn't help :(

(function () {
    [...document.querySelectorAll(".control")].forEach(button => {
        button.addEventListener("click", function() {
            document.querySelector(".active-btn").classList.remove("active-btn");
            this.classList.add("active-btn");
            document.querySelector(".active").classList.remove("active");
            document.getElementById(button.dataset.id).classList.add("active");
            window.scrollTo(0, 1)
        })
    });
    document.querySelector(".theme-btn").addEventListener("click", () => {
        document.body.classList.toggle("light-mode");
    })
    scroll();
})();

function scroll() {
    document.addEventListener("scroll", function() {
        let target;
        if (window.scrollY >= window.scrollMaxY) {
            target = document.querySelector(".active-btn").nextElementSibling;
        } else if (window.scrollY <= 0) {
            target = document.querySelector(".active-btn").previousElementSibling;
        }
        target && target.click();
    });
}

Here is the JavaScript code I made very quickly for that (so it is not the best), updated with the scrolling. To make it work, you have to add something to the body in the CSS: min-width: 101vh in order to get a scrollable window.
Note: The content of a section takes some delay to appears, so if you scroll fast it will go over the section before displaying the content.

[gashiray]

hey I ran into the same issue where the code wasn't running due to an error <TypeError: allSections.addEventListener is not a function> I tried to rectify it I looked in the comments I tried all the suggestions it didn't work, I copied the code and it still didn't work. Hopefully you can assist me with the java script