通過JavaScript處理圖像，非常簡單

Question

編輯：

非常感謝你們。有一個偉大的夜晚/天

---

所有我想要做的是通過檢查小區的ID的javascript更改表格單元格的圖片src。

我已經看過堆棧溢出及其解決方案的每一個相關問題。出於某種原因，我的代碼將無法工作。最有可能的語法/睡眠不足問題

這JS腳本在一個表中，坐落在src上面，我試圖改變取決於事情：

<script> 
function getImage(){ 
return "http://i.imgur.com/s5WKBjy.png"; //i literally just want to see if this works and it isn't 
} 
document.onload = function(){ 
    document.getElementById('homeimage').src = getImage(); 
}; 
</script> 

    <td colspan="3"><img style="width:110px;height:128px;" id = "homeimage" onload="getImage()"></td> 


<td colspan = "3"><img style="width:150px;height:128px;" id = "homeimage"></td> 

既不上述工作。使用onload =「getImage（）」而不使用。我是愚蠢的嗎？我必須明白我缺少的東西。

Answer 1

至於如果你不希望使用任何ID的您可以使用此方法， 此代碼爲n個TD的在你的餐桌上......

window.onload = function() 
 
{ 
 
    
 
    var rows = document.getElementsByTagName("table")[0].rows; 
 
    tds = rows[0].getElementsByTagName("td"); 
 
    for (var n=0; n<tds.length;n++) 
 
    { 
 
     tds[n].getElementsByTagName('img')[0].src = getImage(); 
 
    } 
 
} 
 

 
function getImage(){ 
 
return "http://i.imgur.com/s5WKBjy.png"; 
 
}

<table> 
 
    <tr> 
 
    <td colspan="3"><img style="width:110px;height:128px;"></td> 
 
    <td colspan = "3"><img style="width:150px;height:128px;"></td> 
 
    </tr> 
 
</table>

Answer 2

您不能有兩個具有相同ID的圖像。例如，命名一個homeimage1，另一個homeimage2。

Answer 3

我們不能在單個網頁中多次使用相同的id。使用不同的ID。 第二變化doucment.onload到window.onload

function getImage(){ 
 
return "http://i.imgur.com/s5WKBjy.png"; 
 
} 
 
window.onload = function(){ 
 
    document.getElementById('homeimageA').src = getImage(); 
 
    document.getElementById('homeimageB').src = getImage(); 
 
}

<td colspan="3"><img style="width:110px;height:128px;" id = "homeimageA" onload="getImage()"></td> 
 

 

 
<td colspan = "3"><img style="width:150px;height:128px;" id = "homeimageB"></td>

Answer 4

注意事項：

1. 您有重複的ID，其中的ID 是應該是唯一的。
2. 您應該使用encodeURIComponent()來返回url值。
3. 您不必在圖像本身上使用onload。
4. 您應該在窗口對象上綁定onload事件，這將會執行。
5. 將src設置爲decodeURIComponent()之前返回值。

---

<td colspan="3"><img style="width:110px;height:128px;" id="homeimage1"></td> 
<td colspan = "3"><img style="width:150px;height:128px;" id="homeimage2"></td> 

現在改變了JS：

<script> 
    function getImage(){ 
     return encodeURIComponent("http://i.imgur.com/s5WKBjy.png"); //i literally just want to see if this works and it isn't 
    } 
    window.onload = function(){ 
     document.getElementById('homeimage').src = decodeURIComponent(getImage()); 
    }; 
</script>