jsで、配列に入れた画像をクリックで切り替える方法について

Question

前提・実現したいこと

配列に画像を格納して乱数を発生させランダムな位置に画像を表示し、画像(今回は配列一番先頭の画像)をクリックすると別の画像に切り替わるようにしたいです。ランダムな位置に表示させる所までは出来たのですが、画像の切り替えの方法がわかりません。ご教授よろしくお願い致します。

該当のソースコード

function rand(){
	    //画像を配列
	    var arr = ['sample_1.png', 'sample_2.png', 'sample_3.png','sample_4.png','sample_5.png'];

	    // 画像の順番を入れ替える
	    for (i = arr.length; i > 0; --i) {
	      tmp = arr[p = Math.floor(Math.random()*i)] ;
	      arr[p] = arr[i-1] ;
	      arr[i-1] = tmp ;
	    }

	    // 順番に画像を表示する
	    for(var i = 0; i< arr.length;i++){
	      document.write('<img src="'+arr[i]+'" alt="'+arr[i]+'" /><br>') ;
	    }


      // クリックしたら画像が切り替わる(かなりめちゃくちゃなコードだと思われます)
            arr[0].onclick = function() {
              arr[0].src = 'sample_6.png';
　　　　　　　}
}

Comments

[yukikp]

1)それぞれの画像にidか別々のclassを振る
2)クリックした画像をfadeoutさせて、クリックした画像以外の画像をランダムに選んでfadeinさせる。

[Kohar]

ありがとうございます。帰宅したら1)の方法を試してみたいと思います。

[yukikp]

１）と２）は選択肢じゃなくて、まずは１）をした後で２）をするといいですよ～って意味ですよ～
ガンバってください！

[Kohar]

なるほど！お恥ずかしいです…ありがとうございます、何とかやってみます。

Answer 1

提示されている情報の範囲だとこんなかんじで

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var arr = ['sample_1.png', 'sample_2.png', 'sample_3.png','sample_4.png','sample_5.png'];
  const hoge=document.querySelector('#hoge');
  arr.map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]).forEach(x=>{
    var img=document.createElement('img');
    img.setAttribute('src',x);
    img.setAttribute('alt',x);
    hoge.appendChild(img);
  });
  hoge.querySelector('img').addEventListener('click',e=>{
    console.log(1);
    e.target.src='sample_6.png';
    e.target.alt='sample_6.png';
  });
});
</script>
<div id="hoge"></div>

Comments

[Kohar]

ご回答ありがとうございます。実行した所、ランダムに画像を表示する所までは上手く行ったのですが画像をクリックして他の画像に切り替わる動作が一番最初の画像(ランダムに並び替えた後の一番最初の画像)のみしか切り替わりません。(一番最初の画像は問題なく切り替わります)
imgに何か問題があるのでしょうか...

[yambejp]

質問の流れを見ると、逆に1番最初の画像のみを切り替えたいのかと思い
回答を提示しています。

1番めをクリックしたら6に変わるとして、2番め以降をクリックしたら
何に変わるのでしょうか？全部6に変わる？