点击按钮更新URL参数，用于后续Fetch请求的技术需求

你的核心逻辑是可行的，但可以优化得更直接，避免冗余，同时确保点击按钮后全局url变量能同步更新，方便后续发起Fetch请求：

优化后的JavaScript代码 #

// 初始化全局变量
let elementId = "";
let url = ""; 

function updateElementId(element) {
  elementId = element.value;
  // 直接在按钮点击回调里更新全局url，省去单独的test函数
  url = `https://v3.football.api-sports.io/standings?league=${elementId}&season=2023`;
  // 这里可以直接调用Fetch请求，或者留到后续函数使用
  // 示例：fetchLeagueData();
  return elementId;
}

// 后续使用更新后URL的Fetch请求示例
function fetchLeagueData() {
  if (!url) return;
  fetch(url, {
    headers: {
      'x-apisports-key': '你的API密钥' // 记得替换成实际的API密钥
    }
  })
  .then(res => res.json())
  .then(data => {
    console.log('获取到的联赛数据:', data);
    // 这里写数据处理逻辑
  })
  .catch(err => console.error('请求出错:', err));
}

HTML代码（无需改动，保持原样即可） #

<div>
  <button id="button1" value="5" onclick="updateElementId(this)">
    Bouton 1
  </button>
  <button id="button2" value="45" onclick="updateElementId(this)">
    Bouton 2
  </button>
  <button id="button3" value="3" onclick="updateElementId(this)">
    Bouton 3
  </button>
  <button id="button4" value="75" onclick="updateElementId(this)">
    Bouton 4
  </button>
  <button id="button5" value="42" onclick="updateElementId(this)">
    Bouton 5
  </button>
</div>

关键说明 #

• 去掉了冗余的test函数，直接在按钮点击的回调里更新全局url，逻辑更清晰，减少不必要的函数调用
• 点击任意按钮后，全局url会立即更新为对应league参数的地址，后续任何需要使用该URL的函数都能直接读取最新值
• 注意发起API请求时需要添加x-apisports-key请求头，记得替换成你自己的API密钥
• 页面加载时的初始console.log会显示空值，这是正常的，只有点击按钮后url才会被赋值

如果坚持保留原有的test函数，也可以调整成更清晰的逻辑：

var elementId = "";
var url = ""; 

function updateElementId(element) {
  elementId = element.value;
  // 调用test生成URL并同步到全局变量
  url = test();
  return elementId;
}

function test() {
  // 只负责生成URL，不直接修改全局变量，职责更单一
  return `https://v3.football.api-sports.io/standings?league=${elementId}&season=2023`;
}

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