I completed the task by resolving all errors that were encountered.
One minor issue I noticed was that the strong element was not properly closed:
<!-- old code -->
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</a>
<!-- new code -->
<a style="font-size: 45px; color: #A388E7;" class="navbar-brand" href="#"><strong>StudioPick</strong></a>
It's important to use querySelectorAll instead of querySelector if you plan to iterate over elements using forEach since querySelector only returns a single element:
//old code
menuBar.querySelector(".tab-button").forEach(link => {
link.classList.remove("tabs-button-active");
})
tabsContainer.querySelector(".content").forEach(tab => {
tab.classList.remove("content-active");
})
//new code
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tabs-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
Instead of using tabsContainer, it would be more appropriate to use document in the following scenario, as tabsContainer does not contain any horizontal-tabs, which might cause the null issue you mentioned initially:
//old code
document.querySelectorAll(".content").forEach(tabsContainer => {
tabsContainer.querySelector(".horizontal-tabs .tab-button").click();
})
//new code
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click();
})
Here is the corrected and fixed code:
function switchTabs(){
document.querySelectorAll(".tab-button").forEach((link) => {
link.addEventListener("click", () => {
const menuBar = link.parentElement;
const tabsContainer = menuBar.parentElement;
const tabNumber = link.dataset.forTab;
const tabToActivate = tabsContainer.querySelector(`.content[data-tab="${tabNumber}"]`);
menuBar.querySelectorAll(".tab-button").forEach(link => {
link.classList.remove("tabs-button-active");
})
tabsContainer.querySelectorAll(".content").forEach(tab => {
tab.classList.remove("content-active");
})
link.classList.add(".tab-button-active");
tabToActivate.classList.add(".content-active");
});
});
}
document.addEventListener("DOMContentLoaded", () => {
switchTabs();
document.querySelectorAll(".content").forEach(tabsContainer => {
document.querySelector(".horizontal-tabs .tab-button").click();
})
});
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--c-text-primary: #282a32;
--c-text-secondary: #686b87;
--c-text-action: #404089;
--c-accent-primary: #434ce8;
--c-border-primary: #eff1f6;
--c-background-primary: #ffffff;
--c-background-secondary: #fdfcff;
--c-background-tertiary: #ecf3fe;
--c-background-quaternary: #e9ecf4;
}
... (styling removed for brevity) ...