I am new to HTML, CSS and JavaScript. I am getting the error which states: TypeError: 'undefined' is not an object. Now I have tried to look for the issue but had no luck. Can someone help? Error occurs in the console at: item.ClassList.container('active') && handleIndicator(item);
var indicator = document.querySelector('.indicator');
var items = document.querySelectorAll('.nav-item');
function handleIndicator(el) {
items.forEach(function(el) {
item.ClassList.remove('active');
item.removeAttribute('style');
});
indicator.style.width = "".concat(el.offsetWidth, "px");
indicator.style.left = "".concat(el.offsetLeft, "px");
indicator.style.backgroundColor = el.getAttribute('active-color');
el.ClassList.add('active');
el.style.color = el.Attributes('active-color');
}
items.forEach(function(item, index) {
item.addEventListener('click', function(e) {
handleIndicator(e.target);
});
item.ClassList.container('active') && handleIndicator(item);
});<nav>
<a class="nav-item active" active-color="red">Test 1</a>
<a class="nav-item" active-color="blue">Test 2</a>
<a class="nav-item" active-color="purple">Test 3</a>
<a class="nav-item" active-color="pink">Test 4</a>
<div class="indicator"></div>
</nav>item.ClassList.remove('active'); should be item.classList.remove('active');. it should be in lowercase
Try this:
const indicator = document.querySelector('.indicator');
const items = document.querySelectorAll('.nav-item');
function handleIndicator(el) {
items.forEach(e => {
e.classList.remove('active');
e.removeAttribute('style');
});
indicator.style.width = "".concat(el.offsetWidth, "px");
indicator.style.left = "".concat(el.offsetLeft, "px");
indicator.style.backgroundColor = el.getAttribute('active-color');
el.classList.add('active');
el.style.color = el.getAttribute('active-color')
}
items.forEach(item => {
item.addEventListener('click', function(e) {
handleIndicator(e.target);
});
//item.classList.contains('active') && handleIndicator(item);
});<nav>
<a class="nav-item active" active-color="red">Test 1</a>
<a class="nav-item" active-color="blue">Test 2</a>
<a class="nav-item" active-color="purple">Test 3</a>
<a class="nav-item" active-color="pink">Test 4</a>
<div class="indicator"></div>
</nav>