JS跨文件变量无法更新：点击按钮后current值始终为初始值

我定义了current变量用来存储点击按钮的内容，想在加载新HTML页面时，在另一个JS文件里使用这个变量的值，但current始终保持为'my_null'，file2生成新页面时，problem_type_title显示的就是'my_null'。

我预期点击对应按钮后，current会更新为传入的值（例如"Geometry"）。JS文件已正确引入，变量能跨文件传递（problem_type为'my_null'而非undefined），但值未按预期更新。

文件1代码 #

const geo = document.getElementById('geo');
const algebra = document.getElementById('alegbra');
const centroid = document.getElementById('centroid');
const angle_bisector = document.getElementById('angle_bisector');
const two_pole = document.getElementById('two_pole');
const herons = document.getElementById('herons');
const x_intercept = document.getElementById('x_intercept');
const inverse_functions = document.getElementById('inverse_functions');
const challenge = document.getElementById('challenge');
var current = 'my_null';

geo.addEventListener('click', () => {update_curr('Geometry')});
alegbra.addEventListener('click', () => {update_curr('Alegbra')});
centroid.addEventListener('click', () => {update_curr('Centroid')});
angle_bisector.addEventListener('click', () => {update_curr('Angle Bisector')});
two_pole.addEventListener('click', () => {update_curr('Two Pole')});
herons.addEventListener('click', () => {update_curr("Heron's Formula")});
x_intercept.addEventListener('click', () => {update_curr('X-intercept')});
inverse_functions.addEventListener('click', () => {update_curr('Inverse Functions')});
challenge.addEventListener('click', () => {update_curr('Challenge Problems')});


function update_curr(clicked) {
    current = clicked;
}

文件2代码 #

// Deleted code before this function for readability
async function update(url){
  // Setting value of current as a variable in this function
  let problem_type = current;
  let id = await set_problem(url);
  url = url + "challenges/" + id;
  console.log(url);
  console.log("id = " + id)
  fetch(url).then(res => res.json())
  .then(function(problem) {
      console.log(problem);
      img = problem.img;
      answer = problem.answer;
      div_main = document.createElement('div');
      div_main.innerHTML = `
        <div class='trainer_area' id='trainer_area'>
            <div class='problem_type_title'>
                // Accessing the variable
                ${problem_type}
            </div>
       // More code that doesn't matter
  });
}

原因与解决方案 #

核心原因 #

加载新HTML页面时，浏览器会重新初始化整个JavaScript运行环境，原页面中修改后的current变量会被重置为初始值'my_null'，因此新页面无法获取到更新后的值。

解决方法 #

方法1：URL参数传递（最直观的跨页面传值方式）

修改文件1的点击事件，将值拼入跳转URL：

geo.addEventListener('click', () => {
  // 替换为实际的新页面地址
  window.location.href = 'new-page.html?problemType=Geometry';
});
// 其他按钮同理，替换对应的problemType值

在文件2中读取URL参数：

async function update(url){
  const params = new URLSearchParams(window.location.search);
  // 读取参数，默认值保持'my_null'
  let problem_type = params.get('problemType') || 'my_null';
  // 后续原有代码不变
}

方法2：localStorage临时存储

利用浏览器本地存储临时保存值，新页面读取后清除：
修改文件1的update_curr函数：

function update_curr(clicked) {
  localStorage.setItem('currentProblemType', clicked);
  // 这里添加页面跳转逻辑
  window.location.href = 'new-page.html';
}

文件2中读取并清除：

async function update(url){
  let problem_type = localStorage.getItem('currentProblemType') || 'my_null';
  // 读取后立即清除，避免影响后续页面
  localStorage.removeItem('currentProblemType');
  // 后续原有代码不变
}

方法3：单页场景下调整调用时机（如果没有刷新页面）

如果只是动态加载内容而非跳转新页面，确保先更新current再调用update函数：
修改文件1的点击事件：

geo.addEventListener('click', () => {
  update_curr('Geometry');
  // 直接调用file2中的update函数
  update('你的目标URL');
});

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