Как мне заставить мои javascript функции работать внутри тега head?

Question

спасибо за помощь! Извините, если я сформулировал это неправильно или вызвал у вас дополнительное время.

У меня есть набор кода, на самом деле это часть javascript, которую я узнал на W3Schools. Код создает простое слайд-шоу для моего Art. Вот ссылка на W3Schools

Мне не нравится, когда мой javascript код находится на моем HTML, и обычно я решаю простые проблемы, используя события onload, чтобы все мои javascript может оставаться в голове. Я все еще новичок и искренне ценю любое ваше понимание. Я хочу учиться, а не заставляйте вас делать это за меня.

Это мой сценарий, в настоящее время я должен поместить его в конец тегов тела, чтобы он работал. Когда я помещаю это во внешний файл js и связываю этот файл в голове, он терпит неудачу, как я и ожидал. Моя проблема в том, что я не знаю, как решить, поместив сложный код (то есть более одной функции) в голову. Обычно для отдельных функций, а это все, что мне было нужно до сих пор, я прикрепляю к этой функции событие onload.

Может ли кто-нибудь показать мне, как можно разместить этот набор скриптов во внешнем файле и связать это в заголовках тегов?

Вот мой сайт, я оставил его сломанным на случай, если вы хотите видеть ошибки журнала консоли. Слайд-шоу проходит вниз по странице наполовину, и при загрузке страницы отображаются все три изображения в слайд-шоу. Если щелкнуть стрелки влево и вправо, изображение изменится и будет выглядеть нормально.

<script>
    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function currentSlide(n) {
        showSlides(slideIndex = n);
    }

    function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("slides");
        var dots = document.getElementsByClassName("dot");
        if (n > slides.length) { slideIndex = 1 }
        if (n < 1) { slideIndex = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
        }
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex - 1].style.display = "block";
        dots[slideIndex - 1].className += " active";
    }
</script>

Answer 1

Вы можете просто и самый простой чистый JavaScript способ - использовать функцию DOMContentLoaded , что означает, что ваша функция slideshow будет запущена после того, как страница будет полностью заполнена загружен и готов, чтобы не возникало ошибок.

Просто оберните свою slideshow функцию, как показано ниже, и все должно быть хорошо.

window.addEventListener('DOMContentLoaded', function() {
   //DOM is ready 
   console.log('DOM fully loaded and parsed');
   //Run slide show.
  showSlides(slideIndex);
});

Answer 2

Если ваш javascript пытается работать с HTML объектами, которых еще нет в DOM, он потерпит неудачу. Хитрость заключается в том, чтобы не запускать javascript, пока страница не будет полностью загружена / готова.

Пробовали ли вы поместить свой «активный» код в событие, которое срабатывает после того, как DOM готова?

$(window).on("load", function(){
   showSlides(slideIndex);
});

Или, если у вас есть jQuery:

$(document).ready(function() {
   showSlides(slideIndex);
});

Хорошая идея - выработать привычку думать в терминах порядка выполнения. Я вижу, что вы вызываете метод, который еще не был «определен». Хотя в некоторых ситуациях это может сработать (javascript будет «поднимать» функции и переменные в некоторых контекстах), это все равно может привести к затруднению чтения кода и ошибкам.

Я вижу, вы только начинаете свой путь, так что еще многое предстоит открыть! Удачи.