javascript - Django - Cannot get console.log to output in VSCode Terminal

Question

I'm new to using Javascript with django and am trying to use console log to test my Javascript code but am having trouble getting it to work. I check the terminal, outpout, problems, and Debug console but none show the output of console.log. I know my javascript is working because the ui dropdown menu is populated when I use the ajax code below and it displays nothing if I remove it. However, I cannot tell if the event listener is working..

here is my html:

<div class="ui selection dropdown" id = "cars">
    <input type="hidden" name="car">
    <i class="dropdown icon"></i>
        <div class="default text">Choose a car</div>
            <div class="menu" id = 'cars-data-box'>

            </div>
</div>

Here is my Javascript

const carsDataBox = document.getElementById('cars-data-box')
const carInput = document.getElementById('cars')

$.ajax({
type: 'GET',
url: '/cars-json/',
success: function(response){
    console.log(response)
    const carsData = response.data
    carsData.map(item=>{
        const option = document.createElement('div')
        option.textContent = item.name
        option.setAttribute('class', 'item')
        option.setAttribute('data-value', item.name)
        carsDataBox.appendChild(option)
    })
},
error: function(error){
    console.log(error)
}

})

carInput.addEventListener('change', e=>{
    const selectedCar = e.target.value
    console.log(response)
    })

urls.py

urlpatterns = [
path('', page),
path('cars-json/', get_json_car_data),
]

views.py

def page(request):
    qs = Car.objects.all()
    return render(request, 'testenv/home.html', {'qs' : qs})

def get_json_car_data(request):
    qs_val = list(Car.objects.values())
    return JsonResponse({'data' : qs_val})

question from:https://stackoverflow.com/questions/65838277/django-cannot-get-console-log-to-output-in-vscode-terminal

Answer 1

Waitting for answers