棒球联赛统计页面年份/类型选择器关联脚本失效求助

页面内的年份（selectStatsYear）与统计类型（selectStatsType）下拉菜单，本应触发脚本加载对应赛季/类型的JSON数据并更新联赛领袖统计表格，但当前功能完全失效。已尝试更新脚本、排查基础错误，仍无法解决问题。

核心需求：脚本需根据选中的年份和统计类型，读取对应JSON数据文件，重新渲染击球、投球类别的联赛数据领袖表格。

相关代码片段 #

核心JavaScript变量定义 #

// 疑似问题所在的JS代码片段
var m,
    pushStat,
    z,
    count,
    assignTeam,
    getYear = 2023, // 硬编码年份，未动态更新
    statsFile = "/assets/stats/EVBL-stats-" + getYear + ".json?nocache=" + new Date().getTime(), // 未包含统计类型参数
    teamNameData = [{
        fullName: "East Van Black Sox",
        lastName: "Black Sox",
        abbr: "SOX",
        logoPath: "Black_Sox.png"
      },
      {
        fullName: "Little Mtn Blasters",
        lastName: "Blasters",
        abbr: "LM",
        logoPath: "blasters.png"
      },
      // 其余球队数据省略
    ],
    logoRootURL = "/assets/team_logos/",
    battingStatsTabs = [20, 11, 12, 28, 23, 22, 21, 9, 10],
    pitchingStatsTabs = [69, 67, 70, 54, 57, 59, 101, 99],
    tablelength = 15,
    qualifyPA = 0,
    qualifyBF = 0,
    // 其余全局变量省略
    batTabsHtml = "<ul>",
    pitchTabsHtml = "<ul>";

页面HTML结构 #

<div class="selectGroupWrapper">
  <div class="selectGroupList">
    <select id="selectStatsYear">
      <option value='2023' selected>2023</option>
      <option value='2022'>2022</option>
      <option value='2019'>2019</option>
      <option value='2018'>2018</option>
      <option value='2017'>2017</option>
    </select>
  </div>
  <div class="selectGroupList">
    <select id="selectStatsType">
      <option value='regular' selected>Regular Season</option>
      <option value='playoffs'>Postseason</option>
    </select>
  </div>
</div>
<div id="leadersTableMobile">
  <h4>Processing Stats...</h4>
</div>
<div id="leadersTable">
  <h4>Processing Stats...</h4>
</div>
<script>
  document.getElementById("selectStatsYear").addEventListener("change", fetchAndDisplayStats);
</script>
<script src="https://eastvanbaseball.squarespace.com/scripts/league_leaders_v2_min.js?version=0"></script>

问题根源分析 #

1. 事件绑定不完整：仅给年份下拉菜单绑定了change事件，统计类型下拉菜单未绑定，切换常规赛/季后赛不会触发数据更新。
2. 硬编码变量未动态更新：全局变量getYear固定为2023，下拉切换年份后未同步更新该变量，导致请求的JSON路径始终指向2023年数据。
3. 未处理统计类型参数：statsFile路径仅包含年份，未加入regular/playoffs类型标识，无法区分常规赛与季后赛数据文件。
4. 数据加载逻辑未重构：原脚本的初始化逻辑仅执行一次，未封装为可重复调用的函数，无法在下拉切换时重新加载数据并渲染表格。

修复方案 #

1. 补全事件绑定并重构处理函数 #

修改页面底部的事件绑定脚本，给两个下拉菜单都绑定处理函数，并动态获取选中值：

<script>
  const yearSelect = document.getElementById("selectStatsYear");
  const typeSelect = document.getElementById("selectStatsType");

  function fetchAndDisplayStats() {
    // 获取选中的年份与统计类型
    const selectedYear = yearSelect.value;
    const selectedType = typeSelect.value;
    
    // 生成带类型参数的JSON请求路径
    const statsFile = `/assets/stats/EVBL-stats-${selectedYear}-${selectedType}.json?nocache=${new Date().getTime()}`;
    
    // 调用数据加载与渲染逻辑（需确保原脚本中有对应函数）
    loadAndRenderStats(statsFile);
  }

  // 给两个下拉菜单绑定事件
  yearSelect.addEventListener("change", fetchAndDisplayStats);
  typeSelect.addEventListener("change", fetchAndDisplayStats);

  // 页面初始化时执行一次
  fetchAndDisplayStats();
</script>

2. 封装数据加载与渲染逻辑 #

在原JS脚本中，将数据加载、表格渲染逻辑封装为可重复调用的函数：

function loadAndRenderStats(statsUrl) {
  // 重置页面加载提示
  document.getElementById("leadersTable").innerHTML = "<h4>Processing Stats...</h4>";
  document.getElementById("leadersTableMobile").innerHTML = "<h4>Processing Stats...</h4>";

  // 发起JSON请求
  fetch(statsUrl)
    .then(response => {
      if (!response.ok) throw new Error(`HTTP错误：${response.status}`);
      return response.json();
    })
    .then(statsData => {
      // 调用原有的击球、投球数据渲染逻辑
      renderBattingLeaders(statsData);
      renderPitchingLeaders(statsData);
    })
    .catch(error => {
      // 显示错误提示
      document.getElementById("leadersTable").innerHTML = `<h4>加载失败：${error.message}</h4>`;
      document.getElementById("leadersTableMobile").innerHTML = `<h4>加载失败：${error.message}</h4>`;
      console.error(error);
    });
}

// 原有的渲染函数示例（需根据实际逻辑调整）
function renderBattingLeaders(data) {
  // 清空原有HTML
  batHtml = '<div id="batting_leaders"><h3>BATTING LEADERS</h3>';
  batHtmlMobile = '<div id="batting_leadersMobile"><h3>BATTING LEADERS</h3><div id="bat_tabs">';
  
  // 处理击球数据、生成表格HTML（复用原脚本中的逻辑）
  
  // 更新页面DOM
  document.getElementById("leadersTable").innerHTML += batHtml;
  document.getElementById("leadersTableMobile").innerHTML += batHtmlMobile;
}

function renderPitchingLeaders(data) {
  // 同理处理投球数据渲染
}

3. 确保JSON文件命名规范 #

确认服务器上的JSON文件命名与请求路径一致，例如：

• 2022年常规赛：EVBL-stats-2022-regular.json
• 2023年季后赛：EVBL-stats-2023-playoffs.json

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