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

@Limongrass · Регистрация: 07.11.2017

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

Есть вот такой вот код:

JavaScript
1
2
3
4
5
6
var a = document.getElementByClass('green');
document.addEventListener('click', rim);
 
function rim(){
    a.style.background = #FFFB97;
}

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

@amr-now · 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 очень легко потерять. Достаточно переписать эту функцию например в стрелочном виде.

@diadiavova · 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";
    }

@amr-now · 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>

Из-за невнимательности программа может работать непредсказуемо.
Щёлкнули по второй строчке, а покрасится первая строчка.

@Limongrass · 29.10.2018, 11:07 **[ТС]**

Спасибо большое, все заработало!

@diadiavova · 29.10.2018, 11:28

Сообщение от amr-now

Из-за невнимательности программа может работать непредсказуемо.
Щёлкнули по второй строчке, а покрасится первая строчка.

Да это понятно. Я бы так делать не стал, просто показал где ТС ошибся.

Новые блоги и статьи Все статьи Все блоги /
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .

@Limongrass 0 / 0 / 0 Регистрация: 07.11.2017 Сообщений: 121
	29.10.2018, 11:07 [ТС]
	Спасибо большое, все заработало! 0