クリックすると、ユーザーが選択できる他の画像が表示される背景画像のあるテーブルがあります。これは機能しており、クリックイベントで表示または非表示になります。ただし、ユーザーがクリックして 2 番目の画像を追加すると、画像のメニューが (本来あるべき姿で) 再び表示されますが、2 回表示されます。私が試した解決策をコメントアウトしました。my_div
最初のクリックで表示してから削除できると思いましたallImages.onclick
。これにより、Chrome で null エラーが発生しますが、おそらく理解できるでしょう。ここでの問題は似ています。リンクを正しく追加したことを願っています。とにかく、アドバイスや助けをいただければ幸いです。
function addImage(col) {
var img = new Image();
img.src = "../www/images/TEST.png";
col.appendChild(img);
img.onclick = function () {
var myImages = new Array();
myImages[0] = "../www/images/TEST3.png";
myImages[1] = "../www/images/TEST2.png";
myImages[2] = "../www/images/TEST4.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
var newList = document.createElement("ul");
newList.appendChild(allImages);
my_div = document.getElementById("showPics");
my_div.appendChild(newList);
my_div.style.display = 'block';
allImages.onclick = function (e) {
img.src = e.target.src;
my_div.style.display = 'none';
//var element = document.getElementById("showPics");
//element.parentNode.removeChild(element);
};
}
};
};
for (r = 0; r < howOften; r++) {
row = table.insertRow(-1);
for (c = 0; c < numDays; c++) {
col = row.insertCell(-1);
addImage(col);
}
}
document.getElementById('holdTable').appendChild(table);