为什么可以't我使用javascript显示一个新图像

Why can't I display a new image using javascript?

本文关键字：显示 一个 图像 新图像 javascript 为什么      更新时间：2023-09-26

我正在尝试创建一个页面，允许查看者在每次用户单击时查看新图像。这些图像分别命名为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>​

http://jsfiddle.net/qLQZf/

让它在这里工作是你的演示

新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();
};
相关文章：