JavaScript - я не могу сохранить значение переменной после цикла

Question

Я хочу сохранить значение переменной в цикле и продолжать его использовать, но я не знаю, как это сделать

function slide(){   
    var picter = document.getElementsByClassName("picter");
    var g=0;
    var c=0;
    for(var i=0;i<picter.length;i++){   
        if(getComputedStyle(picter[i]).opacity == 1){
            picter[g].style.opacity = 0;
            g+=1;
            picter[g].style.opacity = 1;
            break;
        }
    }
    //alert(g);
}


<div class="slider" >
    <a class="back arrow" onclick="slide()">Back</a>

    <div class="picterSlider">
        <div class="picter picterLeft">Left</div>
        <div class="picter picterCenter">Center</div>
        <div class="picter picterRight">Right</div>
    </div>

    <a class="next arrow" onclick="slide()">Next</a>
</div>

Я пытался установить другую переменную, но этоне работает (

Answer 1

Я думаю, что вижу, что вы пытаетесь сделать здесь, вы могли бы посмотреть на фрагмент с комментариями, и я был бы рад ответить на любые ваши вопросы, если таковые имеются.

// Define g globally
var g = 0;

function slide(increment) {
  var picter = document.getElementsByClassName("picter");
  var c = 0;
  for (var i = 0; i < picter.length; i++) {
    if (getComputedStyle(picter[i]).opacity == 1) {
      picter[g].style.opacity = 0;
      g += increment;
      
      // Make sure g doesn't get below 0
      g = g < 0 ? 0 : g;
      
      // Make sure g doesn't go beyond the last element
      g = g > picter.length - 1 ? picter.length - 1 : g;
      picter[g].style.opacity = 1;
      break;
    }
  }
  
  alert(g);
}

<div class="slider">
  <a class="back arrow" onclick="slide(-1)">Back</a>

  <div class="picterSlider">
    <div class="picter picterLeft">Left</div>
    <div class="picter picterCenter">Center</div>
    <div class="picter picterRight">Right</div>
  </div>

  <a class="next arrow" onclick="slide(1)">Next</a>
</div>

Answer 2

Вы можете установить переменную в качестве глобальной переменной

var picter;
var g=0;
var c=0;
function slide(){   
     = document.getElementsByClassName("picter");

    for(var i=0;i<picter.length;i++){   
        if(getComputedStyle(picter[i]).opacity == 1){
            picter[g].style.opacity = 0;
            g+=1;
            picter[g].style.opacity = 1;
            break;
        }
    }
    //alert(g);
}


<div class="slider" >
    <a class="back arrow" onclick="slide()">Back</a>

    <div class="picterSlider">
        <div class="picter picterLeft">Left</div>
        <div class="picter picterCenter">Center</div>
        <div class="picter picterRight">Right</div>
    </div>

    <a class="next arrow" onclick="slide()">Next</a>
</div>

Или вы также можете сохранить свое значение переменной в localstorage. И каждый раз, когда вы хотите использовать, вы можете извлечь его из localstograte