Как при клике на элемент скопировать его текст в input value?

Question

[JSnewbie]

К примеру, есть вот такая HTML конструкция с одинаковыми селекторами:

<div class="text-wrap">
    <div class="text-item">
        Текст 1
    </div>
    
    <div class="text-item">
        Текст 2
    </div>
    
    <div class="text-item">
        Текст 3
    </div>
    
    <div class="text-item">
        Текст 4
    </div>
</div>

<div class="input-wrap">
    <input id="input" type="text" value="Текст 1">
</div>

Как при клике на элемент с классом text-item скопировать его содержимое в поле #input?

Comments

[Сергей Соколов]

это ж просто. Где вы застряли?

[JSnewbie]

Сергей Соколов, я только изучаю js :3 Хотелось бы увидеть хотя бы пример чтобы его потом разобрать)

[Вадим]

JSnewbie,
https://learn.javascript.ru/introduction-browser-events
https://learn.javascript.ru/mouse-events-basics

На этом ресурсе помогают решить проблему. У Вас нет проблемы. Вы ничего не сделали. Или, как минимум, не показали что сделали или что пытались сделать. В таком случае это квалифицируется как задание, а не вопрос и таким образом. нарушает сразу 2 пункта из правил.
1 - легко ищется поисковиком
2 - задание а не вопрос.
https://qna.habr.com/help/rules

Answer 1

[Андрей Скорченко]

const input = document.getElementById('input');
const items = document.querySelectorAll('.text-item');

const setValueToInput = ({ target: { textContent } }) => {
  input.value = textContent.trim();
}

for (const item of items) {
  item.addEventListener('click', setValueToInput);
}

Answer 2

[Сергей Соколов]

Answer 3

[Надим]

<div class="text-wrap">
    <div onclick="document.querySelector('#input').value = this.innerText" class="text-item">
        Текст 1
    </div>
</div>

<div class="input-wrap">
    <input id="input" type="text" value="Текст 1">
</div>

Answer 4

[Глюкъ Виртуален]

1. установи любой обработчик клика по нужному элементу
2. по сработке возьми $('input').val() если речь идет о JQ.
3. используй где надо