点击按钮时Fetch API URL未更新问题求助（附代码）

• 变量作用域冲突：在myFunction里你用let endPoint = 'happiness'声明了局部变量，这会覆盖全局的endPoint变量，导致全局的endPoint始终是空字符串。fetchQuoteOption执行时读取的是全局变量，自然拿不到更新后的值。
• 额外说明：初始化时的choiceUrl仅在页面加载时计算一次，后续即使全局endPoint变化，它也不会自动更新，但你在fetchQuoteOption里是直接拼接apiUrl和endPoint，所以这不是当前问题的核心。

方案1：修改全局变量赋值 #

去掉myFunction里的let，直接修改全局的endPoint：

function myFunction() {
  endPoint = 'happiness'; // 去掉let，直接操作全局变量
  fetchQuoteOption();
}

方案2：将endPoint作为参数传入函数（更推荐） #

避免依赖全局变量，把目标endPoint作为参数传递给fetchQuoteOption，代码逻辑更清晰且不易出错：

// 修改fetchQuoteOption函数，接收endPoint参数
async function fetchQuoteOption(endPoint) {
  try {
    const response = await fetch(`${apiUrl}${endPoint}`);
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('Error:', error);
  }
}

// 修改点击事件处理函数，传递参数
function myFunction() {
  fetchQuoteOption('happiness');
}

额外优化：统一处理多按钮逻辑 #

如果要给其他按钮（Motivational、Loved等）添加功能，可以通过自定义属性统一绑定事件，减少重复代码：

// 修改quoteOptions里的按钮，添加data-tag属性
quoteTypes.innerHTML =
  `<div class='container2'>
    <p>Welcome! How are you feeling today?</p>
        <button id="happyBtn" data-tag="happiness">Happy</button>
        <button id="motivationalBtn" data-tag="motivational">Motivational</button>
        <button id="lovedBtn" data-tag="love">Loved</button>
        <button id="humorousBtn" data-tag="humor">Silly</button>
      </div>`;

// 统一绑定点击事件
document.querySelector('.container2').addEventListener('click', function(e) {
  if (e.target.tagName === 'BUTTON') {
    const tag = e.target.dataset.tag;
    fetchQuoteOption(tag);
  }
});

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