Need help with javascript on my page

Hello campers…
I coded this page with the intention of using it to practice javascript for the first time. I intend to make any current navigation link active and also be able to switch to the different body layouts one at a time by clicking on the links. My code is not working. Please help.
NOTE: I am still learning javascript and haven’t got the hang of it yet.
Thank you.

link to code…

All the li tags in your nav have a class of .current, and you also give one a tag a class of active. Then you have a removeActive function which loops over your lis and removes the active class (which they don’t have, because that is the class you’ve given to your a tag). You could loop over the lis and use querySelector('a') or .children to get the a tags, for example.

Also, your selectItem function takes an event as parameter, you can’t use this within the function to grab the element, you’ll need e.target instead (as e is how you called your event parameter).

Hope that helps for a start.

Thanks for reaching out. I have tried it but its not working. I have also uncommented the hide/show style I added to the body layouts so its now showing just the first one. I want to make each appear by clicking on the links and showing a current state on the link as well.

Ok there’s still a couple of things to do:

  1. Your nav links. Right now you’re selecting them like this:
    const navItems = document.querySelectorAll('a');
    The problem: If you have any other links on your site, those will be included, and you probably don’t want that. So you can either change that to const navItems = document.querySelectorAll('#navigation a'); (that will only select the a tags within your navigation), or - what I’d rather do - remove the a tags from your nav entirely, because you’re not using them as actual anchor tags. The href attribute doesn’t actually link anywhere. Your nav links could as well be a button or just a simple p or div, because the functionality you give them only comes from your JavaScript. Changing them to a p or div or span would also help with another issue:

  2. This line:
    navItems.forEach(item => item.addEventListener('click', selectItem));
    You don’t have to attach an event listener to an a tag, it’s already there. In fact, you’d probably have to use the preventDefault() method on them in order to prevent unwanted behaviour. If you make those as something else, you can just give those elements a class of nav-item for example and then select them with document.querySelectorAll('.nav-item'); and add your event listeners.

  3. Your selectItem function:

function selectItem(e.target){
	removeActive();
	removeShow();
	// change color of the current nav-link
	this.classList.add('active');
	// grab body items from the DOM
	const bodyItems = document.querySelector(`#${this.id}-content`);
	// add show class
	bodyItems.classList.add('show');
}

You’ve just changed the parameter you’re passing from e to e.target, but you’re still using this in your function body, which doesn’t work. Just pass e to the function again and replace this with e.target.

  1. In codepen, all you put inside the left HTML panel is what goes inside your body tags. <!DOCTYPE html>, <html>, <head> and <body> tags are not necessary, so you can remove them all.

Well, that was a lot. If somethings’s not working and you don’t know why, you can always check the console in codepen (button on the bottom left). It’ll tell you if there’s an error, and also what’s causing the error, so you can fix it.