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

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

Студворк — интернет-сервис помощи студентам

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
1
2
3
4
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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, Большое Спасибо. Все работает.
Еще раз большое спасибо, за детальное объяснение.

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

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

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

Решение