JavaScript求助：年份分区文章计数器函数无法正常统计数量

嗨，刚接触JS就自己折腾计数器功能超棒的！别着急，我一眼就看到问题出在哪了——你的选择器拼写出错啦😎

问题根源分析 #

你写的选择器拼接代码是：

let articles = "#y" + year + "article";

当传入2025时，这个字符串会变成#y2025article，但你实际要找的是id="y2025"的section下面的所有<article>元素。正确的CSS选择器应该是#y2025 article（注意ID和标签名之间的空格，代表「选中该ID元素下的所有article子元素」）。你现在的写法相当于在找一个id="y2025article"的元素，当然找不到任何内容，所以articlesSelected.length一直是0。

修正方案 #

把选择器那行改成下面两种写法之一都可以：

• 传统字符串拼接（注意加空格）：

let articles = "#y" + year + " article";

• ES6模板字符串（更简洁易读）：

let articles = `#y${year} article`;

额外提醒：别忘了触发统计 #

另外要注意，页面加载完成后需要主动调用这个统计函数，不然计数器不会自动更新。你可以在JS代码最后加一段页面加载监听：

// 页面加载完成后自动统计2025年的日志数
window.addEventListener('load', () => {
  totalLog('2025');
});

完整可运行的修正代码 #

<section id="home">
  <p>choose the year you want to view!</p>
  <button onclick="goToYear('2025')">
    <span class="year">2025</span>
    <br>
    <span id="logs2025">total logs: </span>
  </button>
</section>

<section id="y2025">
  <article><p> test article test test test </p></article>
  <article><p> 第二篇测试文章 </p></article> <!-- 多添加一篇方便测试数量 -->
</section>

<script>
function totalLog(year) {
  // 修正后的选择器
  let articles = `#y${year} article`;
  let articlesSelected = document.querySelectorAll(articles);
  let currentSpan = "logs" + year;
  let currentSpanSelected = document.getElementById(currentSpan);
  currentSpanSelected.innerText = "total logs: " + articlesSelected.length;
}

// 页面加载时自动执行统计
window.addEventListener('load', () => {
  totalLog('2025');
});

// 补全你没贴全的跳转函数（如果需要的话）
function goToYear(year) {
  document.getElementById(`y${year}`).scrollIntoView({ behavior: 'smooth' });
}
</script>

这样修改之后，计数器就能准确统计对应年份分区下的文章数量啦！如果还有其他细节问题随时问~

内容来源于stack exchange