在動態創建的節點中更改圖像

最終，我希望用戶能夠單擊節點，顯示圖像選擇並使用其選擇填充節點。然而現在，我只是試圖用一個不同的圖像onclick來測試如何改變放置在創建表的節點上的圖像。我的邏輯模糊嗎？在動態創建的節點中更改圖像

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); 
};

來源

2012-12-30 Inkers

'image1'永遠不會插入到DOM中，並且爲'img'變量指定一個新值並不會改變現有的DOM節點。您需要將新的'src'分配給現有的DOM節點。（另外，你似乎正在使用[全局變量]（http://stackoverflow.com/questions/1470488/difference-between-using-var-and-not-using-var-in-javascript）。） – DCoder

創建你的image.createElement（'img'）' – bukart

將img附加到col時，會附加img變量「指向」的圖像。如果（當）稍後將變量img更改爲指向另一個值時，它不會更改附加到列的內容。你可以在appendChild之後加入img = 'hello';來測試它 - 你會發現img被追加了，而不是'hello'。

在onclick函數中當您將img更改爲「指向」image1時，它不會更改附加到col的圖像。

如果您想真正改變附加到dom的內容，您需要刪除圖像並在其位置插入另一個對象。

但幸運的是，你想要的是一個圖像與另一個src，所以你不需要從dom中刪除圖像並插入另一個 - 你只需要改變已經存在的圖像的src。要做到這一點，你應該做的是使用onclick函數中的「this」變量（指向col中的圖像）並更改其「src」。

即。

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

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

來源

2012-12-30 14:30:59 Iftah

因此，如果我正確理解這一點，我的目標是節點而不是圖像？我已經嘗試過，它完美的作品。儘管如此，我仍然有點不確定。在繼續之前，我喜歡嘗試和理解。 – Inkers

好的，我已經明白了。謝謝。 – Inkers

在動態創建的節點中更改圖像

回答

相關問題