Проблема с JavaScript при выборе параметров панели навигации ⇐ Html

[Anonymous]

У меня возникла проблема с кодом JavaScript при выборе параметров на панели навигации. Когда я нажимаю на элемент панели навигации, он ведет себя не так, как ожидалось (например, активный класс применяется неправильно/содержимое не меняется/раскрывающийся список не открывается — настройте это в соответствии с вашей проблемой).
Вот упрощенная версия моего кода:

Код: Выделить всё

async function fetchNews(query) {
const res= await fetch(`${url}${query}&apikey=${API_KEY}`)
const data = await res.json();
bindData(data.articles)
}

function bindData(articles){
const cardContainers = document.getElementById("main-container");
const newsTemplate = document.getElementById("template-main");

cardContainers.innerHTML="";
articles.forEach(article => {
if(!article.urlToImage) return;
const cardClone=newsTemplate.content.cloneNode(true);
fillDataInCard(cardClone,article);
cardContainers.appendChild(cardClone)
});
}

function fillDataInCard(cardClone,article){
const newsImg=cardClone.querySelector("#news-img");
const newsSource=cardClone.querySelector("#news-source");
const newsDesc=cardClone.querySelector("#news-desc");
const newsTitle=cardClone.querySelector("#news-title");

newsImg.src=article.urlToImage;
newsDesc.innerHTML=article.description;
newsTitle.innerHTML=article.title;

const date = new Date(article.publishedAt).toLocaleString("en-IN", {
timeZone: "Asia/Kolkata"
});

newsSource.innerHTML = `${article.source.name} · ${date}`;

cardClone.firstElementChild.addEventListener("click",()=>{
window.open(article.url,"_blank")
})

}

function onclickNav(id){
fetchNews(id);
}

Код: Выделить всё

[list]
[*]IPL
[*]Finance
[*]Politics
[/list]

Подробнее здесь: https://stackoverflow.com/questions/798 ... ar-options