Форум

фонарик · #1 (**permalink**) 05.04.2013, 02:50

Доброго времени суток. Подскажите пожалуйста, как нужно правильно повесить функцию в данном примере, чтобы в алерт вывелось название элемента по которому создался блок?
Никак не могу допетрить. Можно, конечно, присвоить создаваемому блоку id с одноименным названием из массива, и потом послать его в алерт - но этот вариант не подходит.

<style type="text/css">
.div_class{position:relative; display: inline-block; background-color:gray; border:1px solid red; width:30px; height:30px; margin-left:5px; cursor:pointer;}
.div_class:hover{background-color:green;}
</style>
<body>
<script>
var arr = ["raz","dva","tri"]

for(i=0; i<arr.length; i++){
var box_div = document.createElement('div')
	box_div.className='div_class'
	document.body.appendChild(box_div)
	box_div.onmouseup=function(){alert(arr[i])}
}
</script>

tsigel · #2 (**permalink**) 05.04.2013, 07:45

<style type="text/css">
.div_class{position:relative; display: inline-block; background-color:gray; border:1px solid red; width:30px; height:30px; margin-left:5px; cursor:pointer;}
.div_class:hover{background-color:green;}
</style>
<body>
<script>
var arr = ["raz","dva","tri"]

for(i=0; i<arr.length; i++){
var box_div = document.createElement('div');
	box_div.className='div_class';
	document.body.appendChild(box_div);
    addHandler.call(box_div, arr[i]);	
}

function addHandler(num) {
  this.onmouseup=function(){alert(num);};
};
</script>

Не буду претендавать на то что мое решение самое верное.

danik.js · #3 (**permalink**) 05.04.2013, 08:12

Классическая ошибка. Ваша функция onmouseup будет вызвана уже после окончания цикла, по событию mouseup. А к этому времени значение i проитерируется с 0 до 4 и четверкой так и останется. В итоге arr[4] == undefined.

Вариант:

<style type="text/css">
.div_class{position:relative; display: inline-block; background-color:gray; border:1px solid red; width:30px; height:30px; margin-left:5px; cursor:pointer;}
.div_class:hover{background-color:green;}
</style>
<body>
<script>
var arr = ["raz","dva","tri"]
var fn = function(i, e) {
    alert(arr[i])
}
var ret = function(i) {
    return function(e) {
        fn.apply(this, [i, e])
    }
}
for(var i=0; i<arr.length; i++){
var box_div = document.createElement('div')
    box_div.className='div_class'
    document.body.appendChild(box_div)
    box_div.onmouseup= ret(i)
}
</script>

фонарик · #4 (**permalink**) 05.04.2013, 19:31

Всё верно, всё правильно

Я уже понял что нужно в алерт выводить другой функцией, открыл для себя интересный метод call )) Спасибо вам ребята

Форум

Справочник

Discord чат

Курсы javascript