我的外部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不能正常工作，但內部它很好

回答

相關問題