Как подставить значение в input при клике на элементе?

@skapunker · Регистрация: 13.12.2013

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

Всем приветы! Подскажите пожалста, как такое сделать.

Нужно чтобы при клике любом из блоков с классом .color-value значение цвета подставлялось в input с id #xf_gallery-background

Вот конструкция.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class=color-container>
    <div class=color-block style=background:#$color_1></div>
    <div class=color-value id=autocolor>#00000</div>
 
        <div class=color-block style=background:#$color_2></div>
        <div class=color-value >#FFFFF</div>
 
        <div class=color-block style=background:#$color_3></div>
        <div class=color-value >#00FF00</div>
 
        <div class=color-block style=background:#$color_4></div>
        <div class=color-value >#FF00FF</div>
 
        <div class=color-block style=background:#$color_5></div>
        <div class=color-value >#0000FF</div>
</div>
 
<input type="text" class="form-control width-500" name="xfield[gallery-background]" id="xf_gallery-background">

@UchihaSV · 27.03.2021, 20:00

Вот так будет:

JavaScript
1
2
3
4
5
6
7
var input = document.getElementById('xf_gallery-background');
var elements = document.querySelectorAll('.color-value');
elements.forEach(function(elem) {
    elem.addEventListener('click', function() {
        input.value = elem.innerText;
    });
});

И не забудьте поставить кавычки в значениях аттрибутов во всех тегах html:

HTML5
1
2
<div class="color-block" style="background:#$color_2"></div>
<div class="color-value">#FFFFF</div>

Новые блоги и статьи Все статьи Все блоги /
Перемещение выделенных строк ТЧ из одного документа в другой Maks 30.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 Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .

Как подставить значение в input при клике на элементе?

Решение