爲什麼我無法使用javascript顯示新圖像？

我正在嘗試創建一個頁面，讓用戶每次點擊它時都可以查看新圖像。圖像被命名爲0.jpg，1.jpg，2.jpg，3.jpg和4.jpg。爲什麼我無法使用javascript顯示新圖像？

但是，圖片網址在點擊後不會改變。我也試着在Chrome Developer工具中分析圖片，並且控制檯不會出現錯誤。這是爲什麼？

這是我的javascript。

var imageCount = 5; 
var currentIndex = Math.floor(Math.random() * imageCount); 

    function loadNewPhoto() { 
    currentIndex = (currentIndex + (Math.random() * 3) + 1) % imageCount; 
    alert(currentIndex); 
    document.getElementById('generatedImage').src = 'images/' + currentIndex + '.jpg'; 
    } 

    // Shuffle order of photos. 
    document.onready = function() { 
    loadNewPhoto(); 
    document.getElementById('getMeNewPhotoLink').onclick(function(e) { 
     e.preventDefault(); 
     loadNewPhoto(); 
    }); 
    }

和HTML

<a href="#" id="getMeNewPhotoLink"> 
    <img id="generatedImage" src="images/0.jpg" alt="" /> 
</a>

http://jsfiddle.net/qLQZf/

來源

2012-07-17 John Hoffman

明白了這裏的工作是你的DEMO

新的HTML：

<a href="javascript:shuffle()" id="getMeNewPhotoLink" > 
    <img id="generatedImage" src="images/0.jpg" alt="" /> 
</a>

href現在是一個JavaScript函數，而不是"#"，更優雅的解決方案

新的JavaScript：

var imageCount = 5; 
var currentIndex = Math.floor(Math.random() * imageCount); 
alert(currentindex); 
    function loadNewPhoto() { 
    currentIndex = Math.floor((currentIndex + (Math.random() * 3) + 1) % imageCount);//Added Math.floor, else was generating decimal value 
    alert(currentIndex); 
    document.getElementById('generatedImage').src = 'images/' + currentIndex + '.jpg'; 
    } 

    // Shuffle order of photos, no need of preventdefault, onclick and ready event handling via code. 

    function shuffle() { 
    loadNewPhoto(); 
    }

來源

2012-07-17 03:11:30

謝謝！那很棒。 href屬性確實很好。你在頁面加載時如何調用loadNewPhoto？ – 2012-07-17 03:26:15

加入你的身體onload =「shuffle（）」 – 2012-07-17 03:39:13

在你的原代碼，你被錯誤分配onclick處理程序。它應該是：

document.getElementById('getMeNewPhotoLink').onclick = function(e) { 
    e.preventDefault(); 
    loadNewPhoto(); 
};

來源

2012-07-17 03:34:51 Phil

爲什麼我無法使用javascript顯示新圖像？

回答

相關問題