добавить текст div для ввода при клике

Question

Мне нужно показывать текст div в клике в заданном поле ввода - но когда я нажимаю на следующий div, то должен показывать предыдущий текст и представлять текст при каждом клике. Это мой HTML.

<div class="input"><input id="inid" value="s"></div>

Answer 1

Вы можете достичь этого, используя getElementsByClassName() для извлечения всех элементов div и через al oop, прикрепите событие click для извлечения текста div и добавьте его к входному значению:

const elements = document.getElementsByClassName("symbols");

for(let i = 0; i < elements.length; i++ ){
  elements[i].addEventListener('click', function() {
    document.getElementById('inid').value += elements[i].innerText
  })
}

<div class="input"><input id="inid" value="s"></div>
<div class="slist">
    <div class="symbols"><span class="face">☆</span></div>
    <div class="symbols"><span class="face">★</span></div>
    <div class="symbols"><span class="face">✤</span></div>
    <div class="symbols"><span class="face">✪</span></div>
    <div class="symbols"><span class="face">✦</span></div>
    <div class="symbols"><span class="face">✫</span></div>
    <div class="symbols"><span class="face">✷</span></div>
    <div class="symbols"><span class="face">✵</span></div>
    <div class="symbols"><span class="face">©</span></div>
    <div class="symbols"><span class="face">™</span></div>
</div>

Следующий фрагмент использования jQuery подход:

const elements = document.getElementsByClassName("symbols");
$(document).ready(function(){
  $('.symbols').click(function(){
    $('#inid').val($('#inid').val() + $(this).text())
  })
})

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<div class="input"><input id="inid" value="s"></div>
<div class="slist">
    <div class="symbols"><span class="face">☆</span></div>
    <div class="symbols"><span class="face">★</span></div>
    <div class="symbols"><span class="face">✤</span></div>
    <div class="symbols"><span class="face">✪</span></div>
    <div class="symbols"><span class="face">✦</span></div>
    <div class="symbols"><span class="face">✫</span></div>
    <div class="symbols"><span class="face">✷</span></div>
    <div class="symbols"><span class="face">✵</span></div>
    <div class="symbols"><span class="face">©</span></div>
    <div class="symbols"><span class="face">™</span></div>
</div>

Answer 2

есть решение с jQuery. похоже на пользователя @ Ma'moun othman.

$(function () {
    $('.symbols').on('click', function () {
        var text = $('#inid');
        text.val(text.val() + $(this).text());    
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="input"><input id="inid" value="s"></div>

        <div class="slist">
            <div class="symbols"><span class="face">☆</span></div>
            <div class="symbols"><span class="face">★</span></div>
            <div class="symbols"><span class="face">✤</span></div>
            <div class="symbols"><span class="face">✪</span></div>
            <div class="symbols"><span class="face">✦</span></div>
            <div class="symbols"><span class="face">✫</span></div>
            <div class="symbols"><span class="face">✷</span></div>
            <div class="symbols"><span class="face">✵</span></div>
            <div class="symbols"><span class="face">©</span></div>
            <div class="symbols"><span class="face">™</span></div>
        </div>