Как передать по нажатию на span из него текст в input по его id - JavaScript, jquery

Question

через цикл создаю span с id по номеру list.
добавляю list под input в form

надо, чтобы по нажатию на конкретный span, текст span перекидывался в input

response['is_taken'] = ['some', 'some2']

html

<script>
... some ajax code ...
    var list = ''
    for (var i in response.is_taken){
         list = list + '<span name="'+(response.is_taken[i])+'" id="'+(i)+'">'+(response.is_taken[i])+'</span> '
         }
    $('#ajax-service').after('<div id="ajax-service-list" name="ajax-service-list">'+(list)+'</div>')
... some ajax code ...
</script>

<form action="/orders/add/" method="post">
    <label for="ajax-service">Услуга:</label>
    <input type="text" name="one_form-service" id="ajax-service" class="form-control">
    <button type="submit" class="btn btn-primary btn-block">Добавить заказ</button>
</form>

если передавать просто, то document.getElementById('inputId').value = spanId.textContent;

но как по нажатию на span, взять его id и передать в input?

UPD

код внизу выдает ошибку:

 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at Object.success (?category=simple:135)
    at c (jquery-3.6.0.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-3.6.0.min.js:2)
    at l (jquery-3.6.0.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery-3.6.0.min.js:2)

 for (var i in response.is_taken) {
                            list = list + '<span class="badge bg-secondary" name="'+(response.is_taken[i])+'" id="#service'+(i)+'">'+(response.is_taken[i])+'</span> '
                            }
                        //console.log("i: "+i);
                        let elem_input = document.querySelector("ajax-service")
                        let elem = document.querySelector("service"+i);
                        elem.addEventListener("click", function(e){
                                 elem_input.value = e.target.getAttribute("name");
                            });

Answer 1

Добавить обработчик события click на весь контейнер и делать там что угодно.

const container = document.querySelector('.container')
const input = document.querySelector('input')
let length = 10
while (length--) {
  const s = document.createElement('span')
  s.textContent = `text${length}`
  container.appendChild(s)
}

container.addEventListener('click', ({ target }) => {
  if (target.nodeName === 'SPAN') {
    input.value = target.textContent
  }
})

span {
  padding: 0 0.5em;
}

<input type="text">
<div class="container"></div>

Answer 2

Если элементов span не тысячи, то в цикле создать прослушивание событий

let elem_input = document.querySelector("ajax-service")
for (let i =1; i <= NumberOfSpans; i++) {
    let elem = document.querySelector("#span"+i);
    elem.addEventListener("click", function(e){
         elem_input.value = e.target.getAttribute("data-something"));
    });
}

БЛОГ НА HUSL

Как передать по нажатию на span из него текст в input по его id - JavaScript, jquery

Ответы (2 шт):