Onclick函数出现不到一秒，然后消失

Question

想要查看onclick函数事件。但没有用。在第15行，当onclick调用showComment函数不起作用时

const loadCatagori = async () => {
const url = `https://openapi.programming-hero.com/api/news/categories`
const res = await fetch(url);
const data = await res.json();
displaycatagori(data.data.news_category);
}
loadCatagori();
const displaycatagori = datas => {
const catagory = document.getElementById('catagory');
catagory.innerHTML = ``;
for (let it = 0; it < datas.length;it++)
{
const div = document.createElement('div');
div.innerHTML = `
<div onclick="showComment(${datas[it].category_id})">
<a href="" class="hover:underline underline-offset-[10px]">${datas[it].category_name}</a>
</div>
`;

catagory.appendChild(div);
};
}
const showComment = inputId => {
const count = document.getElementById('count');
count.innerText = inputId;
}

这是HTML代码。我想把结果显示为countid通过javascript中的showComment()函数。结果只显示了几个瞬间。然后就消失了。

<section class="container sm:mx-auto py-5 bg-[#FFFFFF] rounded-lg">
<h1 class="px-4 text-xl "><span id="count"></span> items found for catagory <span id="cata_name"></span></h1>
</section>

Answer 1

<a href=""

在JavaScript完成运行后，单击带有相对URL的链接将导致浏览器导航到该URL(将DOM重置为原始HTML中表示的状态)。

使用<button type="button"...创建一个元素，用户可以点击它来触发JavaScript效果。不要使用链接(除非该链接提供了默认行为，如果JS可用，你可以重写该行为，并且在JS运行时阻止该链接的默认行为)。