如何更改 function 內的全局變量的值

Question

我知道以前有人問過這個問題，但我的情況似乎有點不同

我有兩個 js 文件，一個用於邏輯，一個用於包含有關電影數據的對象

我的第一個文件看起來像這樣

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;

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;

testClick.addEventListener("click", function(){
    var movie = movieII
})

我從中獲取對象的文件看起來像這樣

var movieI = {
    title: "Titanic",
    releaseYear: 1997,
    rating: "PG21",
    duration: "3 hours",

    actors: [

    {
        name: "leonardo dicaprio",
        role: "role goes here"
    },

    {
        name: "kate winslet",
        role: "role goes here"
    },

    ]
};


var movieII = {
    title: "Wolf of wall street",
    releaseYear: 2013,
    rating: "PG18",
    duration: "2H 30M",

    actors: [

    {
        name: "leonardo dicaprio",
        role: "role goes here"
    },

    {
        name: "jonah hill",
        role: "role goes here"
    },

    ]
};

在我的第一個 js 文件中，我關注了 function

testClick.addEventListener("click", function(){
    movie = movieII
})

這應該修改電影變量的值並將其設置為movieII，以便它可以從我的對象文件中切換/訪問第二個對象（movieII），但它似乎不起作用。

Answer 1

您是否嘗試使用 function 和此項目的參數？

這是js 中的文檔 Function

Answer 2

您的問題是更新 object 不會改變 HTML 中已經顯示的內容，您需要使用新信息更新 HTML，但只有在變量中更改后才能更新。

您可以線性執行（就像您在代碼中所做的那樣），或者只是創建一個 function ，您可以每次調用它，這將幫助您避免重復代碼。

這是您可以做到的一種方法：

//Titanic

let movieI = {
    title: "Titanic",
    releaseYear: 1997,
    rating: "PG21",
    duration: "3 hours",

    actors: [

    {
        name: "leonardo dicaprio",
        role: "role goes here"
    },

    {
        name: "kate winslet",
        role: "role goes here"
    },

    ]
};


let movieII = {
    title: "Wolf of wall street",
    releaseYear: 2013,
    rating: "PG18",
    duration: "2H 30M",

    actors: [

    {
        name: "leonardo dicaprio",
        role: "role goes here"
    },

    {
        name: "jonah hill",
        role: "role goes here"
    },

    ]
};

let actorsBox = document.getElementById("actos-box");
let movieTitle = document.getElementById("movieTitle");
let rating = document.getElementById("rating");
let movieYear = document.getElementById("movieYear");
let movieDuration = document.getElementById("movieDuration");
let actorName = document.getElementById("actorName");
let actorRole = document.getElementById("actorRole");
let actorNameI = document.getElementById("actorName2");
let actorRoleII = document.getElementById("actorRole2");
let testClick = document.getElementById("testClick");

let movie = movieI;

updateMovie();


testClick.addEventListener("click", function(){
    movie = movieII
  updateMovie();
})

function updateMovie(){
  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;
}

另外，我強烈建議您不要使用 var，因為它可能會做一些您可能不想做的奇怪事情。

看看這個以了解更多關於 let 變量的信息。