JavaScript. Возвращаемое случайное число от 1 до 10 не работает правильно

Question

Итак, у меня есть код, в котором нерестится 15 предметов, мне нужно сделать, что после того, как пользователь нажмет на какой-либо элемент, он вернет уникальный номер. Но на данный момент после нажатия всех элементов, возвращающих одинаковый номер.

for (var t = 0; t < 16; t++) { 
    ....//PART OF CODE 
    var min = 1; 
    var max = 10; 
    var random = Math.floor(Math.random() * (max - min + 1)) + min; 
    _chestArr[t].addEventListener('click',function(){ 
    var tezt = document.createTextNode(random); 
    document.body.appendChild(tezt); 
    },false); 
} 

Answer 1

Это не случайная часть, проблема, это тот факт, что функции обработчика событий вы создаете близко над переменнойrandom, а не значение, которое она имела, когда были созданы отдельные функции. Поэтому все они видят последнее значение, которое вы ему назначили.

Типичный способ исправить это с помощью функции застройщика или Function#bind:

функция Builder:

for (var t = 0; t < 16; t++) { 
    ....//PART OF CODE 
    var min = 1; 
    var max = 10; 
    var random = Math.floor(Math.random() * (max - min + 1)) + min; 
    _chestArr[t].addEventListener('click',buildHandler(random),false); 
} 
function buildHandler(r) { 
    return function(){ 
     var tezt = document.createTextNode(r); 
     document.body.appendChild(tezt); 
    }; 
} 

Function#bind:

for (var t = 0; t < 16; t++) { 
    ....//PART OF CODE 
    var min = 1; 
    var max = 10; 
    var random = Math.floor(Math.random() * (max - min + 1)) + min; 
    _chestArr[t].addEventListener('click',function(r){ 
    var tezt = document.createTextNode(r); 
    document.body.appendChild(tezt); 
    }.bind(null, random),false); 
} 

Обратите внимание, что опция Function#bind будет влиять на значение this в вашем обработчике, тогда как версия функции строителя не будет. Вы не используете в своем обработчике, но если бы вы были, функция строителя, вероятно, была бы способ пойти.