Не подтягиваются скрипты js

Question

Решил перенести скрипты js в отдельный файл, и в тоге скрипт не вызывается не работает, хотя должен, прошу подскажите

<div>
    <!-- alt картинок должен совпадать с value в селекторе, чтобы картинки выводились нужные. -->
    <div id="change_img_car">
        <img src="~/Img/sketches/VarTexProcessImages/PosadkaSlitka.png" alt="PosadkaSlitka">
        <img src="~/Img/sketches/VarTexProcessImages/0-0.png" alt="Var 0-0">
    </div>
    <br />
    <select class="list_car">
        <option checked="checked" value="PosadkaSlitka">-</option>
        <option value="Var 0-0">Var 0-0</option>
    </select>
</div>

Скрипт:

<script>
    ///// Скрипт работы выпадающего списка https://ru.stackoverflow.com/questions/1317780/%D0%9A%D0%B0%D0%BA-%D0%BF%D0%BE%D0%BC%D0%B5%D1%81%D1%82%D0%B8%D1%82%D1%8C-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D0%BD%D0%BD%D0%BE%D0%B5-%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B2-div-%D0%BF%D0%BE-%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D1%8E-%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F-option-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%B0-se
    let selCar = document.querySelector('.list_car'), // Берём селектор
        viewCar = document.querySelector('#change_img_car'); // и берём блок в котором находятся картинки авто

    // Проверяем какой option выбран, изначально будет первый, его и отобразим
    viewCar.querySelector(`[alt="${selCar.value}"]`).classList.add('--show');

    // Вешаем обработчик на изменение `option`
    selCar.addEventListener('change', function (e) {
        viewCar.querySelector('.--show').classList.remove('--show'); // Удаляем класс с выбранной ранее картинки
        viewCar.querySelector(`[alt="${e.target.value}"]`).classList.add('--show'); // И вешаем новый, который есть у выбранного option
    });
    ///// Скрипт работы выпадающего списка

</script>

Если в одном файле cshtml, то работает ,если перенести скрипт в отдельный файл js, то скрипт не подтягивается. Суть работы скрипта: динамическое изменение выбранной картинки

Answer 1

Создал функцию, перенёс туда код js. Добавил кнопку и решил таким образом проблему: принудительный запуск функции по нажатию на кнопку

async function getImage() {
    ///// Скрипт работы выпадающего списка 
    let selCar = document.querySelector('.list_car'), // Берём селектор
        viewCar = document.querySelector('#change_img_car'); // и берём блок в котором находятся картинки авто

    // Проверяем какой option выбран, изначально будет первый, его и отобразим
    viewCar.querySelector(`[alt="${selCar.value}"]`).classList.add('--show');

    // Вешаем обработчик на изменение `option`
    selCar.addEventListener('change', function (e) {
        viewCar.querySelector('.--show').classList.remove('--show'); // Удаляем класс с выбранной ранее картинки
        viewCar.querySelector(`[alt="${e.target.value}"]`).classList.add('--show'); // И вешаем новый, который есть у выбранного option
    });
    ///// Скрипт работы выпадающего списка
}

<div>
    <!-- alt картинок должен совпадать с value в селекторе, чтобы картинки выводились нужные. -->
    <div id="change_img_car">
        <img src="~/Img/sketches/VarTexProcessImages/PosadkaSlitka.png" alt="PosadkaSlitka">
        <img src="~/Img/sketches/VarTexProcessImages/0-0.png" alt="Var 0-0">
    </div>
    <br />
    <select class="list_car">
        <option checked="checked" value="PosadkaSlitka">-</option>
        <option value="Var 0-0">Var 0-0</option>
    </select>
    <button onclick="getImage()">Показать картинку</button>
</div>

Т.е, страница загрузилась, и потом пинаем скрипты через кнопку. Не самое изящное решение, но рабочее.

Также попробовал сделать так, чтобы скрипты подгружались после доступности DOM :

document.addEventListener("DOMContentLoaded", function(){ /* сюда */ })

Но не это не сработало)

Answer 2

Уберите комментирование в скрипте, скрипт у вас закомментирован, поэтому не работает

БЛОГ НА HUSL

Не подтягиваются скрипты js

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