Блог

Это код javascript, который у меня есть,

 for (var i=0;i<divList.length;i  ){
    divList[i].style.backgroundColor="#AA0000";

    divList[i].onclick = function(){
        this.style.backgroundColor="#00AA00";
    }
}
  

Мне просто интересно, почему я не могу использовать

 divList[i].style.backgroundColor="#00AA00";
  

Теоретически вы могли бы, но практически вы не можете по простой причине.

К моменту вызова функции onclick значение divList и i не будет таким, какое вы от них ожидаете. i будет наследоваться лексической областью видимости, и это было бы одинаково i для всех onclick обработчиков, и это было бы divList.length потому, что это последнее значение, которое было присвоено ему.

По сути, вы попытались бы установить цвет N-го div на зеленый, но у вас есть только N-1 элементов.

Есть несколько способов, которыми вы могли бы преодолеть это, но самым простым способом действий было бы просто использовать this . Механизм JavaScript вызовет вашу функцию и привяжется this к элементу, который вызвал событие, в данном случае это будет div элемент, на который был нажат.

Вот еще немного информации по этой теме:

(Пункт 6) https://www.toptal.com/javascript/10-most-common-javascript-mistakes

Это потому, что к моменту вызова onclick для любого из элементов цикл for завершится, и значение i уже будет равно 10 (для всех них).

Протестируйте это: (Обратите внимание на консоль.журнал и зеленое поле)

 var divList = document.getElementsByTagName("DIV");

    for (var i=0;i<divList.length;i  ){
        divList[i].style.backgroundColor="red";

        divList[i].onclick = function () {
            this.style.backgroundColor="blue";
          divList[i-1].style.backgroundColor = "green";
            console.log("i:", i, "element:", i-1);
        }
    }  

 <div>foo 0</div>
<div>foo 1</div>
<div>foo 2</div>
<div>foo 3</div>
<div>foo 4</div>
<div>foo 5</div>
<div>foo 6</div>
<div>foo 7</div>
<div>foo 8</div>
<div>foo 9</div>