我的外部javascript不能正常工作，但内部它很好

-1

嗨，我想创建一个JavaScript演示文稿我正在努力的网站。这是非常基本的，主要是使用w3schools的指南之一。当我在内部使用JavaScript时，演示文稿正常工作，但是在外部使用它时，它会将所有图片加载到列表中，但是当您按下“下一步”按钮时，它们全部消失并且演示文稿正常工作。 here is the page on load 我的外部javascript不能正常工作，但内部它很好

下面

是HTML

<script type="text/javascript" src="../javascript/slide.js"></script> 



      <div class="slideshowcontainer"> 
      <img class="slideshow" src="../images/formalplace1.jpg" style="width:500px" "height:400px"> 
    <img class="slideshow" src="../images/formalplace2.jpg" style="width:500px" "height:400px"> 
    <img class="slideshow" src="../images/formalplace3.jpg" style="width:500px" "height:400px"> 
    <img class="slideshow" src="../images/formalplace4.jpg" style="width:500px" "height:400px"> 

    <button class="left-button" onclick="plusDivs(-1)">&#10094;</button> 
    <button class="right-button" onclick="plusDivs(1)">&#10095;</button> 
</div>

和JavaScript

var slideIndex = 1; 
showDivs(slideIndex); 

function plusDivs(n) { 
    showDivs(slideIndex += n); 
} 

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("slideshow"); 
    if (n > x.length) {slideIndex = 1}  
    if (n < 1) {slideIndex = x.length} 
    for (i = 0; i < x.length; i++) { 
    x[i].style.display = "none"; 
    } 
    x[slideIndex-1].style.display = "block"; 
}

我不是很熟悉JavaScript，但是我已经尝试在做的window.onload和document.onload也是周边它与功能。

任何帮助将不胜感激，谢谢。

来源

2017-04-20 finH

确保你的外部脚本要么装在''标签的结束或有'defer'属性。 – gyre

你把你的剧本放在哪里？ –

你能告诉我们你是如何加载你的外部javascript文件的吗？ –

您的外部JS应该是body标签这样<script src="filename.js"></script>

来源

2017-04-20 17:28:50

体内？我在头部使用了这个。编辑：刚刚尝试将它从头部移动到身体，没有变化，所有图片仍然显示之前点击下一步按钮 – finH

@finH这应该没有问题。 – blackandorangecat

这也可以，确保你有正确的路径。控制台中的输出是什么？ –

内，请务必让showDivs前的DOM被加载。

var slideIndex = 1; 
 

 
document.addEventListener("DOMContentLoaded", function(){ 
 
    showDivs(slideIndex); 
 
}); 
 

 
function plusDivs(n) { 
 
    showDivs(slideIndex += n); 
 
} 
 

 
function showDivs(n) { 
 
    var i; 
 
    var x = document.getElementsByClassName("slideshow"); 
 
    if (n > x.length) {slideIndex = 1}  
 
    if (n < 1) {slideIndex = x.length} 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    x[slideIndex-1].style.display = "block"; 
 
}

<div class="slideshowcontainer"> 
 
    <img class="slideshow" src="../images/formalplace1.jpg" alt="1" style="width:500px" "height:400px"> 
 
    <img class="slideshow" src="../images/formalplace2.jpg" alt="2" style="width:500px" "height:400px"> 
 
    <img class="slideshow" src="../images/formalplace3.jpg" alt="3" style="width:500px" "height:400px"> 
 
    <img class="slideshow" src="../images/formalplace4.jpg" alt="4" style="width:500px" "height:400px"> 
 

 
    <button class="left-button" onclick="plusDivs(-1)">&#10094;</button> 
 
    <button class="right-button" onclick="plusDivs(1)">&#10095;</button> 
 
</div>

来源

2017-04-20 17:40:16 Gerjan

这样做了！非常感谢你，仅仅是为了我的理解，是DOM没有被加载到脚本中的问题，所以它无法在加载时调用它？ – finH

@finH因为你的脚本标签被放置在中，它在body被加载之前执行。你的脚本然后调用showDivs函数。该功能用类“幻灯片”搜索元素。由于这些元素尚未加载，因此无法找到它们。 – Gerjan

由于@gyre指出的那样，你可能同时包括您的外部JavaScript文件中使用defer属性。

所以，这将工作

<script type="text/javascript" src="../javascript/slide.js" defer></script>

来源

2017-04-20 17:50:58

我的外部javascript不能正常工作，但内部它很好

回答

相关问题