使用javascript騎自行車圖像

單擊按鈕時，爲什麼不顯示第二個（鷹）圖像？它直接到顯示螞蟻圖像的else語句。使用javascript騎自行車圖像

<!DOCTYPE html> 
<html> 
    <body> 
     <script> 
      function changeImg() { 
       if (document.getElementById("cycle").src == "fox.jpg") { 
        document.getElementById("cycle").src = "hawk.jpg"; 
       } else { 
        document.getElementById("cycle").src = "ant.jpg"; 
       } 
      } 
     </script> 

     <button onclick = "changeImg()">change image</button> 
     <img id ="cycle" src ="fox.jpg"/> 
    </body> 
</html>

來源

2017-11-17 user8586052

保存自己打字和緩存你的元素'變種週期=的document.getElementById（「循環」）;'那麼你可以這樣做'cycle.src'而不是'document.getElementById'每次。 –

這裏是你在調試javascript的課程：使用'console.log'。我讓你成爲你的代碼的小提琴，但爲'.src'添加了一個日誌語句。 https://jsfiddle.net/z9dojguu/打開控制檯。注意記錄的src與你正在檢查的內容有什麼關係？ –

如果轉到'else'，因爲它不知道有什麼圖像。所以'if'實際上什麼都不做。 – Ady96

請在機身的末尾添加腳本標記，以確保您的DOM是訪問任何元素之前渲染。（就像我的例子）你的代碼的問題是，你需要添加一個新的如果爲每個新添加的圖像。正如你注意到自己，它變得很難理解和調試。對於類似循環的事情，可以對該數組的索引使用數組和模運算。

使用此解決方案，您可以隨意添加儘可能多的圖像到圖像陣列，而無需觸摸代碼/邏輯;

<!DOCTYPE html> 
<html> 
<body> 
    <button onclick="changeImg()">change image</button> 
    <img id="cycle" /> 

    <script> 
    var imageElement = document.getElementById("cycle"); 
    var images = ["fox.jpg", "hawk.jpg", "ant.jpg"]; // add as many images as you want 
    var counter = 0; 
    imageElement.src = images[counter] // set the initial image 

    function changeImg() { 
     counter = (counter + 1) % images.length;  
     imageElement.src = images[counter]; 
    } 
    </script> 
</body> 
</html>

來源

2017-11-17 21:30:12 Daniel

謝謝你的例子。但是，你能解釋一下函數在最後一幅圖像後如何循環回第一幅圖像？ – user8586052

他使用餘數運算符。每次運行changeImg函數時，它都會遞增1.它從0開始，然後是1，然後是2，然後是3 ... oops，數組只有三個項目。因此，將計數器除以數組（3）的長度並取其餘部分，並使用THAT作爲索引。當計數器是3時，它除以3，餘數爲0，並將計數器設回0. – Will

-1

如果您想要訪問屬性的實際內容，請使用getAttribute('src')。否則，你會得到解析的URL。

var cycle = document.getElementById("cycle"); 
if (cycle.getAttribute('src') == "fox.jpg") { 
    cycle.src = "hawk.jpg"; 
} else { 
    cycle.src = "ant.jpg"; 
}

來源

2017-11-17 21:35:01

對不起，我誤點擊了減少，請編輯你的poste，然後我增加它。 –

document.getElementById("cycle").src總是有圖像的完整URL（例如：https://example.loc/example/fox.jpg），這是不是從fox.jpg相似。你需要嘗試其他solution.Try使用 cycle.getAttribute('src')

示例代碼：

function changeImg() { 
      let cycle = document.getElementById("cycle"); 
       console.log(cycle.src,cycle.getAttribute('src')); // show real value and taribute  
      if (cycle.getAttribute('src') == "fox.jpg") { 
       cycle.src = "hawk.jpg"; 
      } else {cycle.src = "ant.jpg"; 
      } 
     }

來源

2017-11-17 21:57:57

使用javascript騎自行車圖像

回答

相關問題