<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>
div.text-wrap {
display: flex;
}
div.text-item {
width: 20vw;
margin: 4px;
padding: 4px;
background-color: #EEE;
cursor: pointer;
}
const input = document.getElementById('input');
const onClick = e => input.value = e.target.textContent.trim();
document
.querySelectorAll('.text-item')
.forEach(el => el.addEventListener('click', onClick));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.