如何在函数内修改全局变量？我的JS电影数据切换问题求助

核心问题 #

你修改了全局变量movie的指向，但没有重新执行DOM渲染逻辑——初始化时你把movieI的数据渲染到了页面元素中，但点击事件里只是替换了movie引用的对象，页面元素的内容并不会自动同步更新。另外，最初事件函数里用var movie = movieII会创建一个局部变量，完全不会影响全局的movie变量，这也是修改无效的原因之一。

解决方案 #

将页面渲染逻辑封装成独立函数，每次切换电影数据后调用该函数，强制更新DOM内容：

修改后的逻辑文件代码

// 获取所有需要更新的DOM元素
var movieTitle = document.getElementById("movieTitle");
var rating = document.getElementById("rating");
var movieYear = document.getElementById("movieYear");
var movieDuration = document.getElementById("movieDuration");
var actorName = document.getElementById("actorName");
var actorRole = document.getElementById("actorRole");
var actorNameI = document.getElementById("actorName2");
var actorRoleII = document.getElementById("actorRole2");
var testClick = document.getElementById("testClick");

var movie = movieI;

// 封装渲染函数：根据当前movie变量更新页面内容
function renderMovie() {
    movieTitle.innerHTML = "Title: " + movie.title;
    movieYear.innerHTML = "release Year: " + movie.releaseYear;
    movieDuration.innerHTML = "Duration: " + movie.duration;

    actorName.innerHTML = "Name: " + movie.actors[0].name;
    actorRole.innerHTML = "Role: " + movie.actors[0].role;

    actorNameI.innerHTML = "Name: " + movie.actors[1].name;
    actorRoleII.innerHTML = "Role: " + movie.actors[1].role;

    rating.innerHTML = "Rating: " + movie.rating;
}

// 页面加载完成后初始化渲染
renderMovie();

// 绑定点击事件：切换电影数据并重新渲染
testClick.addEventListener("click", function(){
    movie = movieII; // 修改全局变量的引用，去掉var避免创建局部变量
    renderMovie(); // 调用渲染函数更新页面
});

关键修改点 #

1. 封装渲染函数：把重复的DOM赋值逻辑抽成renderMovie函数，既减少代码冗余，也方便后续重复调用更新页面。
2. 更新事件逻辑：点击事件中先修改全局movie的指向，再调用renderMovie函数，让页面元素重新读取最新的电影数据并更新。
3. 修正变量作用域：去掉事件函数内的var关键字，确保修改的是全局的movie变量，而非局部变量。

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