[英]Why can't I display a new image using javascript?
我正在尝试创建一个页面,以使查看者每次用户单击新图像时都可以查看它。 这些图像分别命名为0.jpg,1.jpg,2.jpg,3.jpg和4.jpg。
但是,图像URL在单击时永远不会改变。 我还尝试在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>
在这里工作是您的演示
新的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();
}
在原始代码中,您未正确分配onclick
处理程序。 它应该是:
document.getElementById('getMeNewPhotoLink').onclick = function(e) {
e.preventDefault();
loadNewPhoto();
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.