Привет!
Прошу помочь разобраться с ситуацией:
у меня есть
ul, в который динамически добавляю
li, присваивая сразу класс
tab и
active.
При добавлении нового
li мне нужно проверить, существует ли уже
li с классом
active, и если да, то удалить класс
active у "старого"
li. Чтобы среди
li был всегда только один элемент с классом
active.
Вроде бы, всё просто, но не получается сделать такую проверку.
//Create a new Tab
var tabs = document.querySelector("#tabs"),
newContent = document.createElement("div"),
defaultDiv = document.querySelector("#defaultDiv"),
ok = document.querySelector("#ok"),
cancel = document.querySelector("#cancel"),
name = document.querySelector("#name"),
note = document.querySelector("#note"),
activeTab = document.getElementsByClassName("tab active");//Наш li с классами tab и active
//OK button onclick
ok.onclick = function createTab(){
var newTab = document.createElement("li");
console.log(activeTab);
if(activeTab !== null) {
activeTab.classList.remove("active")
}
newTab.innerHTML = name.value;
if (newTab.innerHTML == "") {
alert ("Gimme a name!");
showBgr();
}
else {
tabs.appendChild(newTab);
newTab.setAttribute("data-attr", name.value);
newTab.classList.add("tab", "active");
tabs.insertBefore(newTab, defaultTab);
defaultDiv.appendChild(newContent);
newContent.innerHTML = note.value;
newContent.setAttribute("data-attr", name.value);
newContent.classList.add("content", "active");
}
foldPopup();
};
JS Bin
Консоль выводит
li с классом
tab active, а когда функция срабатывает, то уже выдаётся ошибка Cannot read property "remove" of undefined (Строчки 16-20 кода выше)
Прошу подсказать, почему не работает функция и как это исправить.
