Не могу нормально передать в функцию параметр

118

30 ноября 2020, 03:20

Не могу понять в чем проблема. при выводе в консоли console.log(box) - вроде норм, отображает весь список. как задаю ему console.log(box[number]) - undefined;

window.onload = function(){ 
    var box = document.querySelectorAll('.box'); 
    var boxRight = document.querySelectorAll('.box-right'); 
    var bar = document.querySelectorAll('.bar'); 
    for (var i = 0; i < box.length; i++) { 
        box[i].onmouseover = function (){ 
           showGrey(i); 
        } 
        box[i].onmouseout = function (){ 
            hiddenGrey(i); 
        } 
        bar[i].onclick = function(){ 
            alert('Удаленно'); 
        } 
    } 
    function showGrey(number){ 
        console.log(box); 
            boxRight[number].classList.add('cl-box2'); 
            bar[number].classList.add('cl-bar2'); 
    } 
    function hiddenGrey(number){ 
            boxRight[number].classList.remove('cl-box2'); 
            bar[number].classList.remove('cl-bar2'); 
    }     
}

.box-left { 
  position: absolute; 
  height: 100px; 
  width: 80px; 
  background-color: #e74c3c; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 50px; 
  margin: auto; 
  cursor: pointer; 
  border-top-left-radius: 13px; 
  border-bottom-left-radius: 13px; 
} 
 
.fa-times { 
  font-size: 70px !important; 
  margin: 23px; 
  color: #fff; 
} 
 
.box-right { 
  position: absolute; 
  height: 100px; 
  width: 20px; 
  background-color: #e74c3c; 
  top: 0; 
  bottom: 0; 
  left: 50px; 
  right: 0; 
  margin: auto; 
  transition: 0.5s; 
  cursor: pointer; 
  border-top-right-radius: 13px; 
  border-bottom-right-radius: 13px; 
} 
 
.fa-check { 
  font-size: 70px !important; 
  margin-left: 7px; 
  margin-top: 13px; 
} 
 
.bar { 
  height: 80px; 
  width: 0px; 
  background-color: lightgray; 
  position: absolute; 
  top: 10px; 
  bottom: 0; 
  left: 80px; 
  right: 0; 
  transition: 0.5s; 
  overflow: hidden; 
} 
 
.cl-bar2 { 
  width: 80px; 
} 
 
.cl-box2 { 
  left: 210px; 
}

      <div type='button' name='delete' class='box' > 
        <div class='box-left'> 
          <i class='but-icon fa fa-lg fa-times'></i> 
 
          <div class='bar'> 
            <i class='but-icon fa fa-lg fa-check'></i> 
          </div> 
        </div> 
        <div class='box-right'></div> 
      		</div>

Answer 1

Вы передаете в обработчик функцию без параметров, которая во время выполнения вызывает другую функцию, которая в качестве параметра получает значение переменной i. Так как переменная i одна, обработчики событий всех элементов будут обращаться только к одной единственной переменной, значение которой определяется и меняется в процессе выполнения цикла. В данном случае, так как в цикле срабатывает операция инкремента (увеличение на единицу) в конце ей присваивается значение 1, поэтому все обработчики будут обращаться к этой единственной переменной со значением 1, а элемента boxRight[1] не существует, поэтому возникает ошибка.

Есть два варианта решения этой проблемы.

1) Использовать встроенный метод функций bind, который жестко устанавливает this (в данном случае не нужен) и аргументы.

box[i].onmouseover = showGrey.bind(null, i)
box[i].onmouseout = hiddenGrey.bind(null, i);

2) Использовать современные возможности JavaScript: в цикле переменную i вместо var объявляйте с помощью директивы let. Однако старые браузеры не поддерживают ES6. В такие случаях используют Babel, который переписывает код на предыдущий стандарт ES5.

for (let i = 0; i < box.length; i++) {
  // код...
}

var box = document.querySelectorAll('.box'); 
    var boxRight = document.querySelectorAll('.box-right'); 
    var bar = document.querySelectorAll('.bar'); 
    for (let i = 0; i < box.length; i++) { 
        box[i].onmouseover = function (){ 
           showGrey(i); 
        } 
        box[i].onmouseout = function (){ 
            hiddenGrey(i); 
        } 
        bar[i].onclick = function(){ 
            alert('Удаленно'); 
        } 
    } 
    function showGrey(number){ 
            boxRight[number].classList.add('cl-box2'); 
            bar[number].classList.add('cl-bar2'); 
    } 
    function hiddenGrey(number){ 
            boxRight[number].classList.remove('cl-box2'); 
            bar[number].classList.remove('cl-bar2'); 
    }

.box-left { 
  position: absolute; 
  height: 100px; 
  width: 80px; 
  background-color: #e74c3c; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 50px; 
  margin: auto; 
  cursor: pointer; 
  border-top-left-radius: 13px; 
  border-bottom-left-radius: 13px; 
} 
 
.fa-times { 
  font-size: 70px !important; 
  margin: 23px; 
  color: #fff; 
} 
 
.box-right { 
  position: absolute; 
  height: 100px; 
  width: 20px; 
  background-color: #e74c3c; 
  top: 0; 
  bottom: 0; 
  left: 50px; 
  right: 0; 
  margin: auto; 
  transition: 0.5s; 
  cursor: pointer; 
  border-top-right-radius: 13px; 
  border-bottom-right-radius: 13px; 
} 
 
.fa-check { 
  font-size: 70px !important; 
  margin-left: 7px; 
  margin-top: 13px; 
} 
 
.bar { 
  height: 80px; 
  width: 0px; 
  background-color: lightgray; 
  position: absolute; 
  top: 10px; 
  bottom: 0; 
  left: 80px; 
  right: 0; 
  transition: 0.5s; 
  overflow: hidden; 
} 
 
.cl-bar2 { 
  width: 80px; 
} 
 
.cl-box2 { 
  left: 210px; 
}

<div type='button' name='delete' class='box' > 
        <div class='box-left'> 
          <i class='but-icon fa fa-lg fa-times'></i> 
 
          <div class='bar'> 
            <i class='but-icon fa fa-lg fa-check'></i> 
          </div> 
        </div> 
        <div class='box-right'></div> 
      		</div>