在函数中更新时，布尔值不更新其值

Question

I have created a function called showMoreImages which accepts state as a parameter to check if it is true then change it's value to false along with some other operations. However when I tried it does not update the boolean value referenced. Below the code snippet.

function showMoreImages(num, el, category, state){
  for (var i = 0; i < category.length; i++) {
    toggleClass('show-images', category[i]);
    toggleClass('hide-images', category[i]);
  }
    if(state) {
      updateState('shift-down', 'shift-up', image_one[num]);
      el.innerHTML='View Less';
      state=false;
    }else{
      updateState('shift-up', 'shift-down', image_one[num]);
      el.innerHTML='View More';
      state=true;
    }
}

Where the function is called:

if (i==1) {
    var isPlacesClose=true;
    buttons[i].addEventListener('click', function(){
      showMoreImages(0, this, places, isPlacesClose);
    });
  }

  if (i==2) {
    var isPeopleClose=true;
    buttons[i].addEventListener('click', function(){
      showMoreImages(1, this, people, isPeopleClose);
    });
  }

  if (i==3) {
    var isEventsClose=true;
    buttons[i].addEventListener('click', function(){
      showMoreImages(2, this, events, isEventsClose);
    });
  }

What I am trying to achieve is to update the boolean value which is passed as a parameter. For instance where i=1 I want to update isPlacesClose to false and vice versa.

Thanks in advance!

Answer 1

state is a primitive value, when its value is changed in showMoreImages , it is not retained outside the scope of showMoreImages

Return the value instead

function showMoreImages(num, el, category, state){
  for (var i = 0; i < category.length; i++) {
    toggleClass('show-images', category[i]);
    toggleClass('hide-images', category[i]);
  }
    if(state) {
      updateState('shift-down', 'shift-up', image_one[num]);
      el.innerHTML='View Less';
      return false; //observe change in this line, value is returned instead of setting the same in state
    }else{
      updateState('shift-up', 'shift-down', image_one[num]);
      el.innerHTML='View More';
      return true; //observe change in this line, value is returned instead of setting the same in state
    }
}

Now receive the returned value in the variable which was passed in the argument

if (i==1) {
    var isPlacesClose=true;
    buttons[i].addEventListener('click', function(){
    //observe change in this line, isPlacesClose is updated with returned value 
      isPlacesClose = showMoreImages(0, this, places, isPlacesClose); 
    });
  }

  if (i==2) {
    var isPeopleClose=true;
    //observe change in this line, isPeopleClose is updated with returned value 
    buttons[i].addEventListener('click', function(){
      isPeopleClose = showMoreImages(1, this, people, isPeopleClose);
    });
  }

  if (i==3) {
    var isEventsClose=true;
    buttons[i].addEventListener('click', function(){
      isEventsClose = showMoreImages(2, this, events, isEventsClose);
    });
  }