HTML页面访问计数器显示问题求助：COS DB计数更新正常却无法展示

首先看你代码里最核心的问题：DOM元素ID大小写不匹配。你的HTML中用于显示计数的div id是VisitCount（首字母大写V），但JavaScript里用document.getElementById('visitCount')（小写v）来获取元素——JS里元素ID是严格区分大小写的，这直接导致找不到目标元素，自然无法更新页面内容。

修复步骤 #

1. 统一ID的大小写（推荐遵循小写命名的常规习惯）：

   • 要么修改HTML中的ID：

     visits: <div id="visitCount"></div>
     

   • 要么修改JS中的选择器：

     document.getElementById('VisitCount').innerHTML = visitCountHTML;
     

2. 额外排查验证点（辅助确认问题）：

   • 打开浏览器控制台（F12），查看getVisitCount函数的catch块是否输出错误，确认GET请求是否真的返回了包含visitCount字段的有效JSON
   • 在then(data => {})中添加console.log(data)，直接在控制台查看接口返回的数据结构，确保data.visitCount是正确的字段路径（比如如果接口返回的是{"count": 123}，就要改成data.count）

修正后的完整代码示例 #

<script>
  // 记录访问请求
  function recordVisit() {
    fetch('目标接口地址', {
      method: 'POST',
      // 按需添加headers、body等配置
    });
  }

  // 获取并展示访问计数
  function getVisitCount() {
    fetch('目标接口地址')
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP错误！状态码: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        console.log('接口返回数据:', data); // 调试用，确认数据结构
        const visitCountHTML = `<div>当前访问量: ${data.visitCount}</div>`;
        document.getElementById('visitCount').innerHTML = visitCountHTML;
      })
      .catch(error => {
        console.error('获取访问计数失败:', error);
      });
  }

  // DOM加载完成后执行操作
  document.addEventListener('DOMContentLoaded', function() {
    recordVisit();
    getVisitCount();
  });
</script>

visits: <div id="visitCount"></div>

内容的提问来源于stack exchange，提问作者PoloParachutes