0
476
ViewsJavascript queryselector doesn't work on HTML
please someone help me I've created a .js file for my simple website portfolio but in-state qualification if I click the button doesn't work. Does anyone know why ?
in the picture, if I click 'Work' it's won't change and still in education state.
const tabs = document.querySelectorAll(['data-target']),
tabContents = document.querySelectorAll(['data-content'])
tabs.forEach(tab =>{
tab.addEventListener('click', () =>{
const target = document.querySelector(tab.dataset.target)
tabContents.forEach(tabContent =>{
tabContent.classList.remove('qualification__active')
})
target.classList.add('qualification__active')
tabs.forEach(tab =>{
tab.classList.remove('qualification__active')
})
tab.classList.add('qualification__active')
})
})
<div class="qualification__container container">
<div class="qualification__tabs">
<div class="qualification__button button--flex qualification__active" data-target='#education'>
<i class="uil uil-graduation-cap qualification__icon"></i>
Education
</div>
<div class="qualification__button button--flex" data-target="#work">
<i class="uil uil-briefcase-alt qualification__icon"></i>
Work
</div>
</div>
</div>I'am very new and I little bit confuse about to solve that, any advice on how to solve it?
·
Juan Pablo Isaza
1 answers
Answer question0
The syntax for querySelectorAll is wrong:
const tabs = document.querySelectorAll(['data-target']), tabContents = document.querySelectorAll(['data-content'])
It needs a string, but you are using an array.
Since you want to select by attribute the square brackets need to be part of the string:
const tabs = document.querySelectorAll('[data-target]'),
tabContents = document.querySelectorAll('[data-content]')
·
Juan Pablo Isaza
Report
Answer question