Skip to content

Instantly share code, notes, and snippets.

@vinnihoke
Last active June 14, 2019 01:27
Show Gist options
  • Save vinnihoke/d9c8bb7b293ab74e2ec9472cd800be0a to your computer and use it in GitHub Desktop.
Save vinnihoke/d9c8bb7b293ab74e2ec9472cd800be0a to your computer and use it in GitHub Desktop.
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
@vinnihoke
Copy link
Author

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

@macjabeth
Copy link

What if you try this.item.element?

@vinnihoke
Copy link
Author

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

@vinnihoke
Copy link
Author

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

@vinnihoke
Copy link
Author

vinnihoke commented Jun 13, 2019

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

@macjabeth
Copy link

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! 😁

@vinnihoke
Copy link
Author

Ah!! Super helpful! Thanks Jonathan!

@vinnihoke
Copy link
Author

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.

@vinnihoke
Copy link
Author

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.

@macjabeth
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment