onclick触发showComment后内容闪显即消失的技术求助

问题原因 #

你代码里的分类名称包裹在<a href="">标签中，空的href属性会触发浏览器页面自动刷新逻辑。虽然showComment()函数确实执行并把分类ID写入了count元素，但页面刷新后所有DOM状态都会重置，所以你只能看到内容短暂显示后立刻消失。

解决办法 #

提供两种简单可行的方案：

方案1：修改<a>标签的跳转行为 #

把空的href=""替换成href="javascript:void(0)"，点击时不会触发页面刷新，同时保留<a>标签的默认样式：

const displaycategory = data => {
  const category = document.getElementById('category');
  category.innerHTML = ``;
  for (let it = 0; it < data.length;it++)
  {
    const div = document.createElement('div');
    div.innerHTML = `
    <div onclick="showComment(${data[it].category_id})">
      <a href="javascript:void(0)" class="hover:underline underline-offset-[10px]">${data[it].category_name}</a>
    </div>
      `;
    
    category.appendChild(div);
  };
}

方案2：移除<a>标签，用普通元素模拟链接样式 #

如果不需要<a>标签的语义，直接把分类名称放在可点击的<div>里，添加对应的样式即可：

const displaycategory = data => {
  const category = document.getElementById('category');
  category.innerHTML = ``;
  for (let it = 0; it < data.length;it++)
  {
    const div = document.createElement('div');
    div.innerHTML = `
    <div onclick="showComment(${data[it].category_id})" class="hover:underline underline-offset-[10px] cursor-pointer">
      ${data[it].category_name}
    </div>
      `;
    
    category.appendChild(div);
  };
}

内容的提问来源于stack exchange，提问作者MD.Athar Ishrak