Изменить изображение в динамически созданном узле

Question

В конце концов, я хочу, чтобы пользователь мог щелкнуть по узлу, получить выбор изображений и заполнить узел своим выбором. На данный момент, однако, я просто пытаюсь проверить, как изменить изображение, помещенное в узел при создании таблицы, с помощью другого изображения по щелчку мыши. Моя логика нечеткая?

for (r = 0; r < howOften; r++) {
        row = table.insertRow(-1);

        for (c = 0; c < numDays; c++) {
            col = row.insertCell(-1);
            img=new Image();
            img.src="../www/images/TEST.png";
            col.appendChild(img);

                img.onclick = function() {
                image1= new Image();
                image1.src="../www/images/TEST2.png";
                img=image1;     
                };
            }
        };
    document.getElementById('holdTable').appendChild(table);
};

Answer 1

Когда вы добавляете img к col, вы добавляете изображение, на которое "указывает" переменная img. Если (когда) вы позже измените переменную img, чтобы она указала на другое значение, это не изменит то, что было добавлено к столбцу col. Вы можете проверить это, добавив img = 'hello'; сразу после того, как вы добавите его, вы увидите, что изображение добавлено, а не "привет".

В функции onclick Когда вы изменяете img на "point to" image1, оно не меняет изображение, которое было добавлено к col.

Если вы хотите действительно изменить то, что было добавлено в dom, вам нужно удалить изображение и вставить на его место другой объект.

Но, к счастью, вам нужно изображение с другим src, так что вам не нужно удалять изображение из dom и вставлять другое - вам просто нужно изменить src изображения, которое уже там. Для этого вам нужно использовать переменную this (которая указывает на изображение в столбце) в функции onclick и изменить ее "src".

то есть.

img.onclick = function() {
    // wrong:
    //var image1= new Image();
    //image1.src="../www/images/TEST2.png";
    //img=image1;  

    // right:    
    this.src = '../www/images/TEST2.png';
};