为什么我无法使用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显示新图像？

回答

相关问题