Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
11 / 11 / 2
Регистрация: 21.05.2014
Сообщений: 31
1

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

21.05.2014, 16:23. Просмотров 992. Ответов 3
Метки нет (Все метки)


Здравствуйте.
У меня есть код на 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 + "%)");
}
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.05.2014, 16:23
Ответы с готовыми решениями:

Обработчики событий в JS
Добрый вечер. Появился вопрос. Есть такой HTML код. &lt;form action=&quot;#&quot; method=&quot;post&quot;...

Обработчики событий
Доброго времени суток! Друзья, помогите новичку разобраться. Вопрос такой: через циклы на страницу...

Class и обработчики событий
Доброго времени суток. Кто нибудь, когда нибудь, ложил обработчик события в класс, так делается...

объясните про обработчики событий
подскажите, в чём разница между следующими инструкциями: element.addEventListener(&quot;click&quot;,...

3
супермизантроп
Эксперт JS
3860 / 2934 / 685
Регистрация: 18.04.2012
Сообщений: 8,539
21.05.2014, 16:48 2
Лучший ответ Сообщение было отмечено BarsicPlus как решение

Решение

вместо всего вашего кода напишите так:
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>
1
635 / 522 / 195
Регистрация: 19.08.2013
Сообщений: 1,400
21.05.2014, 21:15 3
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 минуту
1
11 / 11 / 2
Регистрация: 21.05.2014
Сообщений: 31
21.05.2014, 21:34  [ТС] 4
kalabuni, Большое Спасибо. Все работает.
Еще раз большое спасибо, за детальное объяснение.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
21.05.2014, 21:34

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Можно ли объявлять общий обработчики событий?
Собственно вопрос находится в названии темы. Вот код: &lt;input type=&quot;text&quot; id=&quot;text&quot;&gt;&lt;h3...

Повесить обработчики событий на массив элементов
var headers=document.querySelectorAll(&quot;thead tr th&quot;); for(var i=0;i&lt;headers.length;i++)...

Как удалить обработчики событий с элемента?
Обработчик установлен, например, так: &lt;a id=&quot;font&quot; href=&quot;#&quot; onclick=&quot;f();...

Напишите функции-обработчики для следующих событий: onDblclick
onDblclick При двойном щелчке мыши по картинке она должна увеличиваться в размерах


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.