Tabs.js

class Tab {
	constructor(element) {
		// Assign this.element to the passed in DOM element
		this.element = element;
		// Get the custom data attribute on the Link
		this.tabNumber = element.dataset.tab;

		// Using the custom data attribute get the associated Item element
		this.itemElement = document.querySelector(`div.tabs-item[data-tab="${this.tabNumber}"]`);

		// Using the Item element, create a new instance of the TabItem class
		this.itemElement = new TabItem(this.element);
		// Add a click event listener on this instance, calling the select method on click
		this.itemElement.element.addEventListener("click", this.select.bind(this));
	};

	select() {

		console.log("Select is working on the Tab class");
		// Get all of the elements with the tabs-link class
		const links = document.querySelector(".tabs-link");

		// Using a loop or the forEach method remove the 'tabs-link-selected' class from all of the links
		Array.from(links).forEach(link => {
			this.element.classList.remove(".tabs-link-selected");
		});

		// Add a class named "tabs-link-selected" to this link
		this.element.classList.add(".tabs-link-selected");

		// Call the select method on the item associated with this link
		this.element.addEventListener("click", this.select.bind(this));
	}
}

class TabItem {
	constructor(element) {
		// Assign this.element to the passed in element
		this.element = element;
	}

	select() {
		console.log("Select is working on the TabItem class");
		// Select all ".tabs-item" elements from the DOM
		this.element = document.querySelectorAll(".tabs-item");
		console.log("Select is working!!");

		

		// Remove the class "tabs-item-selected" from each element
		this.element.classList.remove(".tabs-item-selected");

		

		// Add a class named "tabs-item-selected" to this element
		this.element.classList.add(".tabs-item-selected");
	}
}

/* START HERE:

- Select all classes named ".tabs-link" and assign that value to the links variable


- With your selection in place, now chain a .forEach() method onto the links variable to iterate over the DOM NodeList

- In your .forEach() method's callback function, return a new instance of TabLink and pass in each link as a parameter

*/

const tabs = document.querySelectorAll(".tabs-link");
tabs.forEach(tab => new Tab(tab));

//We're passing the tab into the new tab class

I'm having trouble with line 20. It is giving me an error in console. Tabs.js:23 Uncaught TypeError: this.item.addEventListener is not a function

What if you try this.item.element?

What did we do to deserve you? Lol
It worked, but can you break down what that is actually saying?

New hiccup is line 36. I'm not really sure what it's referring to.

The double select methods are driving me crazy too... Who wrote this?! Lol

Hehe, sure.

So if you look at line 18, you're instantiating a new TabItem object and passing in the node element.

Down in the constructor function for the TabItem class, you're assigning the class property element to that node you're passing in.

So, the way you were calling it before, you were trying to add an event listener to the class object, and not the element property (which was set to the passed in node). addEventListener is a method on dom elements specifically, not class objects.

Hopefully that helps make sense of it! 😁

Ah!! Super helpful! Thanks Jonathan!

So I'm getting the select button to fire on the Tab class, but nothing is happening. No errors, but also nothing that is supposed to happen. I am unsure where I'm going wrong with this one.

I feel like it has something to do with const links on line 22. I feel like I need to use a this.element something to make it work.

Take a look at the select methods and how you're using the query selectors to select data. How are they being returned? As a node element or as an array?