JavaScript обработчики событий

@BarsicPlus · Регистрация: 21.05.2014

Здравствуйте.
У меня есть код на JavaScript, где при прохождении мышки над картинкой, меняется ее яркость. Но код работает только отдельно. Когда я его помещаю в цикл, как сейчас, то ничего не работает. В чем может быть проблема? Спасибо.

Javascript

var arr = new Array("chip-1", "chip-5", "chip-25", "chip-100");
 
for(var i = 0; i < arr.length; i++) {
    document.getElementById(arr[i]).onmouseover = MouseOver(i);
    document.getElementById(arr[i]).onmouseout = MouseOut(i);       
}
 
function MouseOver(index) {
    document.getElementById(arr[index]).setAttribute("style","-webkit-filter: brightness(" + 90 + "%)");
}
 
function MouseOut(index) {
    document.getElementById(arr[index]).setAttribute("style","-webkit-filter: brightness(" + 100 + "%)");
}

@kalabuni · 21.05.2014, 16:48

вместо всего вашего кода напишите так:

Javascript

var arr = new Array ('chip-1', 'chip-5', 'chip-25', 'chip-100');
for (var i = 0; i < arr.length; i++) with (document.getElementById (arr [i]))
   onmouseover = function () {this.style ['-webkit-filter'] = 'brightness(90%)'},
   onmouseout = function () {this.style ['-webkit-filter'] = 'brightness(100%)'};

объясню кратко
назначать можно:
-- либо только имя функции (без каких либо параметров в круглых скобках)
-- либо определять новую функцию (и тогда можно воспользоваться в контексте объектом this)

вот второй способ я вам и порекомендую
--------------

и ещё: назначать идентификаторы, в значении которых есть символ минуса - это не просто плохой тон, но и нарушение внутренней работы браузера

поясню примером
браузер, встретив любой тег с id, автоматически создаёт переменную, имя которой равно этому id
запустите в любом браузере - и увидите в окошке приветствие:

HTML5

1
2
3

<body onload="alert (abcdef1234.innerHTML)">
<span id="abcdef1234">Hello!</span>
</body>

а теперь запустите другой код - с "дефектным" id вроде вашего
и окошка не увидите, а в "Консоли ошибок" прочитаете, что переменная chip не определена

HTML5

1
2
3

<body onload="alert (chip-1.innerHTML)">
<span id="chip-1">Hello!</span>
</body>

@vovandr · 21.05.2014, 21:15

Javascript

var arr = new Array("chip-1", "chip-5", "chip-25", "chip-100");
 
    for(var i = 0; i < arr.length; i++) {
        document.getElementById(arr[i]).onmouseover = MouseOver(i);
        document.getElementById(arr[i]).onmouseout = MouseOut(i);       
    }
     
    function MouseOver(index) {
       return function(){
        document.getElementById(arr[index]).setAttribute("style","-webkit-filter: brightness(" + 90 + "%)");
      }
    }
     
    function MouseOut(index) {
       return function(){
        document.getElementById(arr[index]).setAttribute("style","-webkit-filter: brightness(" + 100 + "%)");
      }
    }

Добавлено через 1 минуту

@BarsicPlus · 21.05.2014, 21:34 **[ТС]**

kalabuni, Большое Спасибо. Все работает.
Еще раз большое спасибо, за детальное объяснение.

@BarsicPlus 11 / 11 / 2 Регистрация: 21.05.2014 Сообщений: 31
	21.05.2014, 21:34 [ТС]	4
	kalabuni, Большое Спасибо. Все работает. Еще раз большое спасибо, за детальное объяснение. 0

Опции темы

JavaScript обработчики событий

Решение