我的JavaScript文件出现问题。特别是对于我的模态幻灯片和单个图像模态部分，当我将它们作为HTML中的标记添加时，我可以使它们工作，但是当我将它们添加到js文件中时它们不起作用。基本上，我试图创建这个： https://www.w3schools.com/howto/howto_js_lightbox .asp ，但没有底部的图片。我觉得我已经到了一半，但没有正确调整一切。
＆＃xA;＆＃xA;我尝试在Stack Overflow上搜索答案，但无法找到答案，所以如果这是重复，我会道歉。非常感谢任何帮助。
＆＃xA;＆＃xA;以下是我的HTML的底部：
＆＃xA;＆＃xA; ＆lt;！ - ============================= - ＆gt;＆＃xA; ＆lt;！ - 现在所有的JavaScript都来了 - ＆gt;＆＃xA; ＆lt;！ - ============================= - ＆gt;＆＃xA; ＆lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt;！ - Bootstrap core JS - ＆gt;＆＃xA; ＆lt; script src =“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt ;! - 可以在此处放置带有JavaScript文件的脚本标签 - ＆gt;＆＃xA; ＆lt; script src =“js / jquery.stellar.min.js”＆gt;＆lt; / script＆gt;＆＃xA; ＆lt; script src =“js / scripts.js”＆gt;＆lt; / script＆gt;＆＃xA;＆＃xA;＆＃xA;＆＃xA; ＆lt; / body＆gt;＆＃xA;＆lt; / html＆gt;＆＃xA; ＆＃xA;＆＃xA; 这是我的js文件：
＆＃xA ;＆＃xA; $（document）.ready（function（）{＆＃xA;＆＃xA; //幻灯片速度＆＃xA; $（'。carousel'）。carousel（{＆＃ xA; interval：8000＆＃xA;}）;＆＃xA;＆＃xA; // Smooth Scrolling＆＃xA; var $ root = $（'html，body'）;＆＃xA; $（'。navbar-nav a'）。click（function（）{＆＃xA; var href = $ .attr（this，'href'）;＆＃xA; $ root.animate（{＆＃xA; scrollTop：$（href）.offset （）。top＆＃xA;}，500，function（）{＆＃xA; window.location.hash = href;＆＃xA;}）;＆＃xA; return false;＆＃xA;}）;＆＃ xA;＆＃xA; //折叠导航栏＆＃xA; $（文档）.ready（function（）{＆＃xA; $（“。navbar-nav li a”）。click（function（event）{＆＃xA ; $（“。navbar-collapse”）。collapse（'hide'）;＆＃xA;}）;＆＃xA;}）;＆＃xA;＆＃xA; // Stellar＆＃xA; $（窗口） .stellar（）;＆＃xA;＆＃xA; //工具提示＆＃xA; $（function（）{＆＃xA; $（'＃item1'）。tooltip（）;＆＃xA;}）;＆＃ xA; $（function（）{＆＃xA; $（ '[数据肘节= “提示”]'）工具提示（）;＆＃XA; }）;＆＃XA;＆＃XA; //模态幻灯片＆＃xA; function openModal（）{＆＃xA; document.getElementById（'our-adventures-modal'）。style.display =“block”;＆＃xA; }＆＃XA; function closeModal（）{＆＃xA; document.getElementById（'our-adventures-modal'）。style.display =“none”;＆＃xA; }＆＃XA; var slideIndex = 1;＆＃xA; showSlides（slideIndex）;＆＃XA; function plusSlides（n）{＆＃xA; showSlides（slideIndex + = n）;＆＃xA; }＆＃XA; function currentSlide（n）{＆＃xA; showSlides（slideIndex = n）;＆＃xA; }＆＃XA; function showSlides（n）{＆＃xA; var i;＆＃xA; var slides = document.getElementsByClassName（“mySlides”）;＆＃xA; var dots = document.getElementsByClassName（“demo”）;＆＃xA; var captionText = document.getElementById（“caption”）;＆＃xA; if（n＆gt; slides.length）{slideIndex = 1}＆＃xA; if（n＆lt; 1）{slideIndex = slides.length}＆＃xA; for（i = 0; i＆lt; slides.length; i ++）{＆＃xA; slide [i] .style.display =“none”;＆＃xA; }＆＃XA; for（i = 0; i＆lt; dots.length; i ++）{＆＃xA; dots [i] .className = dots [i] .className.replace（“active”，“”）;＆＃xA; }＆＃XA; slide [slideIndex-1] .style.display =“block”;＆＃xA;点[slideIndex-1] .className + =“active”;＆＃xA; captionText.innerHTML = dots [slideIndex-1] .alt;＆＃xA; }＆＃XA;＆＃XA; //个人形象模式＆＃xA; var modal = document.getElementById（'myModal'）;＆＃xA; var img = $（'。myImg'）;＆＃xA; var modalImg = $（“＃img01”）;＆＃xA; var captionText = document.getElementById（“caption”）;＆＃xA; $（'。myImg'）。click（function（）{＆＃xA; modal.style.display =“block”;＆＃xA; var newSrc = this.src;＆＃xA; modalImg.attr（'src' ，newSrc）;＆＃xA; captionText.innerHTML = this.alt;＆＃xA;}）;＆＃xA; var span = document.getElementsByClassName（“close”）[0];＆＃xA; span.onclick = function（）{＆＃xA; modal.style.display =“none”;＆＃xA; }＆＃XA;＆＃XA;}）;＆＃XA; ＆＃XA;