47日目。クリックでずらっと並んだ画像を個別に切り替えたい

目標はカタログの画像をクリックしたら正面、横、上と画像が切り替わる感じのページです。

まずは「画像 クリック 切り替え」で検索してみました。

1.【JavaScript入門】すぐわかる！画像を切り替える方法
コードをコピペして、クリックで画像が切り替わるところまではすぐできました。しかし複数の画像を用意、これをクリックすると他の画像も一緒に切り替わってしまいます。

2.商品詳細ページのように、サムネイル画像をクリックしたらメイン画像が変わる画像ビューアーをjQueryで作ってみた
JQueryが使えたら良さそうですが、今回は使えないので見送り。

3.クリックで切替
これは良さそう。ボタンが画像ごとに３つ必要でデザイン的にいまいちだけど、やりたい事はできました。ひとつにまとめられたらいいのだけど。

4.一枚ずつ画像を切り換える
これだと切り替える画像がたくさんあっても大丈夫そう。しかし１つなら動くのに、複数になると動かない。なんでだろう。

5.クリックで複数画像の画像を個別に切り替える
なるほど、複数画像にそれぞれ個別のタグをつければよさそうです！

test.js

function changeT(iName)
{
    iObj = document.images[iName];
    n    = iObj.src.lastIndexOf("/") + 1;
    iSrc = iObj.src.substring(n,iObj.src.length);
    imgA = 'ari.gif'
    imgB = 'osusume.gif'
    imgC = 'urikire.gif'
    if (iSrc == imgA) iObj.src = imgB; 
    else if (iSrc == imgB) iObj.src = imgC; 
    else iObj.src = imgA;
}

const Targets = [
    ["たまご", 100],
    ["サーモン", 100],
    ["いくら", 300],
    ["あじ", 100],
    ["いわし", 100],
    ["さば",  100],
    ["中トロ", 200],
    ["大トロ", 300],
    ["気まぐれにぎり",300]
]

let str = "";
for (i=0; i<Targets.length; i++ ){
    Target = Targets[i]
    str = str  + `<div class='contents'>`;
    str = str  + `<div class='menu'>${Target[0]}</div>`;
    str = str  + `<div class='price'>¥${Target[1]}円</div>`;
    str = str  + `<img class='ita' src="ari.gif" name="ita${i}" onClick="changeT('ita${i}')">`;
    str = str  + `</div>`
}

const firstscript = function() { 
   document.getElementById('main').innerHTML = str;
   };

window.addEventListener("DOMContentLoaded", firstscript);

画像のnameを個別にするのがキモでした！
これに気がつくのに４時間かかったんですね。ふう。

所要時間

1.Javascriptで画像切り替え ２時間
2.その他 １時間
3.複数画像の画像クリックで個別切り替え　１時間
画像を２つから３つ対応にする　３０分
日本語ファイル名で動かなかった　３０分
4.html,cssコーディング　１時間