Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
0 / 0 / 0
Регистрация: 07.11.2017
Сообщений: 121

При нажатии на определенный блок, цвет этого блока должен меняться.

29.10.2018, 08:47. Показов 1248. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть вот такой вот код:
JavaScript
1
2
3
4
5
6
var a = document.getElementByClass('green');
document.addEventListener('click', rim);
 
function rim(){
    a.style.background = #FFFB97;
}
При нажатии на определенный блок, цвет этого блока должен меняться, но не получается. Делалось без onclick в html
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
29.10.2018, 08:47
Ответы с готовыми решениями:

Открыть закрыть блок при нажатии по ссылке и закрыть его при нажатии вне этого блока
Здравствуйте, несколько дней уже пытаюсь решить задачу, мне нужно сделать блок с авторизацией. Нужно что бы при нажатии на ссылку блок...

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

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

5
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
29.10.2018, 09:03
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="green">Пример</div>
    <script>
        var a = document.querySelector('.green');
        a.addEventListener('click', rim);
 
        function rim(e) {
            e.target.style.background = "#FFFB97";
        }
    </script>
</body>
</html>
Добавлено через 5 минут
Если нужно закрасить элемент, на котором повешено событие. А вложенных элементов в элементе может быть много, то:
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="green">Пример</div>
    <script>
        var a = document.querySelector('.green');
        a.addEventListener('click', rim);
 
        function rim(e) {
            this.style.background = "#FFFB97";
        }
    </script>
</body>
</html>
Но здесь серьёзная опасность - this очень легко потерять. Достаточно переписать эту функцию например в стрелочном виде.
1
 Аватар для diadiavova
7258 / 2605 / 744
Регистрация: 11.04.2015
Сообщений: 4,150
Записей в блоге: 43
29.10.2018, 09:44
Цитата Сообщение от Limongrass Посмотреть сообщение
JavaScript
1
var a = document.getElementByClass('green');
Метод называется getElementsByClassName и возвращает он не отдельный элемент, а список, так что если потом нужно получить, скажем, первый такой элемент в документе, то надо делать так a[0].
Цитата Сообщение от Limongrass Посмотреть сообщение
JavaScript
1
a.style.background = #FFFB97;
Цвет нужно в кавычки заключить.
Итого
JavaScript
1
2
3
4
5
6
7
    var a = document.getElementsByClassName('green');
    document.addEventListener('click', rim);
 
    function rim()
    {
        a[0].style.background = "#FFFB97";
    }
1
Эксперт JS
6496 / 3907 / 2006
Регистрация: 14.06.2018
Сообщений: 6,781
29.10.2018, 11:03
diadiavova, а вот тут ещё одна засада.
Цитата Сообщение от Limongrass Посмотреть сообщение
При нажатии на определенный блок, цвет этого блока должен меняться.
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div class="green">Пример</div>
    <div class="green">Ложное срабатывание</div>
    <script>
        var a = document.getElementsByClassName('green');
        document.addEventListener('click', rim);
 
        function rim(e) {
            a[0].style.background = "#FFFB97";
        }
    </script>
</body>
</html>
Из-за невнимательности программа может работать непредсказуемо.
Щёлкнули по второй строчке, а покрасится первая строчка.
0
0 / 0 / 0
Регистрация: 07.11.2017
Сообщений: 121
29.10.2018, 11:07  [ТС]
Спасибо большое, все заработало!
0
 Аватар для diadiavova
7258 / 2605 / 744
Регистрация: 11.04.2015
Сообщений: 4,150
Записей в блоге: 43
29.10.2018, 11:28
Цитата Сообщение от amr-now Посмотреть сообщение
Из-за невнимательности программа может работать непредсказуемо.
Щёлкнули по второй строчке, а покрасится первая строчка.
Да это понятно. Я бы так делать не стал, просто показал где ТС ошибся.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
29.10.2018, 11:28
Помогаю со студенческими работами здесь

Есть блок покупки. При нажатии на кнопку одного элемента этого блока нужно присвоить его свойства другому(например фото)
Есть блок покупки. При нажатии на кнопку одного элемента этого блока нужно присвоить его свойства другому(например фотографию) ...

Псевдографика , дом в котором при нажатии клавиши один 1 или 2 будет меняться цвет в окошке
сделать дом в котором при нажатии клавиши будет меняться цвет в окошке

При нажатии элемент должен скрываться, но этого не происходит
При нажатии на один из вариантов input type=&quot;radio&quot; хочу чтобы выбранный элемент скрывался, но это не происходит. Что не так? Как...

Есть кнопка на форме документа,при нажатии на неё должен открываться определённый сайт
Есть кнопка на форме документа,при нажатии на неё должен открываться определённый сайт.Как это можно сделать,подскажите пожалуйста...

Вернуть стандартный цвет блока при нажатии на другой
Доброго времени суток! Помогите пожалуйста разобраться с jQuery :) Есть 10 div'ов с одним классом, по умолчанию они чёрные) При нажатии...


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

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru