Übergeben von Bildarray-Werten und Ändern der Bildquelle durch Klicken
OK, also endlich ist der Penny auf das Klickproblem gefallen, das ich hier hatteHänge dynamisches div nur einmal an und ein JSFiddle-Problem. Der Code zeigt dem Benutzer nun eine Auswahl an Bildern, die einmal pro angeklicktem Knoten angezeigt werden. Puh.
Nun aber meineimg.src=e.target.src
Zeile hat Probleme beim Zugriff auf die anderen Bilder im Array. Nur das letzte Bild im Array wird der Tabelle hinzugefügt. Ich denke das liegt daran dasallImages.onclick
Event sollte in der Schleife sein?
Ich habe das versucht und dannimg
wird als undefiniert angezeigt. Ich vermute, das liegt daran, dass die Schleife (und damit die Funktion) vorher läuftvar img
wird deklariert? Ich denke, es ist ein Problem mit der Reihenfolge der Dinge.
Alle Hilfe dankbar.
var makeChart = function () {
var table = document.createElement('table'),
taskName = document.getElementById('taskname').value,
header = document.createElement('th'),
numDays = document.getElementById('days').value, //columns
howOften = document.getElementById('times').value, //rows
row,
r,
col,
c;
var myImages = new Array();
myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png";
myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png";
for (var i = 0; i < myImages.length; i++) {
var allImages = new Image();
allImages.src = myImages[i];
var my_div = document.createElement("div");
my_div.id = "showPics";
document.body.appendChild(my_div);
var newList = document.createElement("ul");
newList.appendChild(allImages);
my_div = document.getElementById("showPics");
my_div.appendChild(newList);
my_div.style.display = 'none';
}
header.innerHTML = taskName;
table.appendChild(header);
header.innerHTML = taskName;
table.appendChild(header);
function addImage(col) {
var img = new Image();
img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
col.appendChild(img);
img.onclick = function () {
my_div.style.display = 'block';
allImages.onclick = function (e) { // I THINK THIS IS THE PROBLEM
img.src = e.target.src;
my_div.style.display = 'none';
img.onclick=null;
};
}
}
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);
document.getElementById('createChart').onclick=null;
}