0

ユーザーがクリックするたびに新しい画像を表示できるページを作成しようとしています。画像の名前は、0.jpg、1.jpg、2.jpg、3.jpg、および 4.jpg です。

ただし、クリックしても画像の URL が変わることはありません。また、Chrome デベロッパー ツールで画像を分析してみましたが、コンソールでエラーは発生しません。何故ですか？

これが私の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/

4

2 に答える 2

1

ここで動作するのはあなたの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-17T03:11:30.453 に答える
0

onclick元のコードでは、ハンドラーを正しく割り当てていませんでした。そのはず：

document.getElementById('getMeNewPhotoLink').onclick = function(e) {
  e.preventDefault();
  loadNewPhoto();
};
于 2012-07-17T03:34:51.693 に答える