How to change value of global variable inside function-CodePudding

I know this has been asked before, but my case seems to be little bit different

I have two js files, one for logic, one for objects which includes data about movie(s)

my first file looks like this

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
})

file from where i fetch objects looks like this

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"
    },

    ]
};

on my first js file i have following function

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

this is supposed to modify value of movie variable and set it to movieII so it can switch/access second object(movieII) from my objects file, but it does not seem to be working.

CodePudding user response：

Have you try to use function and parameters for this project?

Here was the docs Function in js

CodePudding user response：

Your problem is that updating the object doesn't change what has already been shown in the HTML, you need to update your HTML with the new information but only after it changed in the variable.

You can do that linear ( as you have in your code) or just creating a function that you can call every time and will help you avoiding duplicated code.

Here is one way you can do that:

//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;
}

Also I highly recommend you not to use var as it can do weird things you might not want to do.

Take a look at this for learning more about let variables.