Skip to content

why, by clicking on the span, its text is not thrown into the input? javascript, jquery

why, by clicking on the span, its text is not thrown into the input?

html

 <script>
        $(document).ready(function () {
            $('#ajax-service').keyup(function () {
                $.ajax({
                    data: $(this).serialize(), 
                    url: "{% url 'ajax_request' %}",
                    success: function (response) {
                        if (response.is_exist == true) {
                            let list = ''
                            for (var i in response.is_taken) {
                                list = list + '<span name="'+(response.is_taken[i])+'" id="#service'+(i)+'">'+(response.is_taken[i])+'</span> '
                                }
                            let elem_input = document.querySelector("#ajax-service")
                            let elem = document.querySelector("#service"+i);
                            $('#ajax-service-list').remove();
                            $('#ajax-service').after('<div id="ajax-service-list" name="ajax-service-list">'+(list)+'</div>')
                             elem.addEventListener("click", function(e){
                               elem_input.value = e.target.getAttribute("name");
                                });
                        }
                        else {
                             $('#ajax-service-list').remove();
                            $('#ajax-service').after('<div id="ajax-service-list" name="ajax-service-list"><span class="badge rounded-pill bg-warning text-dark" id="ajax-service-list">Нет совпадений</span></div>')
                        }
                    },
                    error: function (response) {
                        console.log(response.responseJSON.errors)
                    }
                });
                return false;
            });
        })
    </script>

error in devtools:

?category=simple:151 Uncaught TypeError: Cannot read property 'addEventListener' of null
    at Object.success (?category=simple:151)
    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)

what is wrong with addEventListener?

Answer

There are several problems with the approach.

  1. You have a loop with multiple i values and only use value of the last one after loop completes
  2. Trying to use querySelector() before the html string is inserted in document
  3. Using # in the element id="#service

A better approach would be to use a common class name and event delegation instead.

'<span class="service-list-item">'+(response.is_taken[i])+'</span>'; 

Then outside of the $('#ajax-service').keyup.. do:

$(document).on('click', '.service-list-item', function(e){
   $('#ajax-service').val( $(this).text());
});

Understanding Event Delegation