如何用javascript更改img src？

我知道還有其他類似的問題，我試過跟着他們，我只是沒有意識到我做錯了什麼。我已經宣佈了pic變量被喜歡的圖片與相應的ID爲'圖片'，我已經嘗試了很多不同的例子，並試圖按照這樣的其他問題，但無濟於事。如何用javascript更改img src？

---真正的問題----

我想形象改變其形象的src到另一個，我有我的工作區與按鈕的點擊。

HTML

<img class="trans" id="pic" src="images/link_rouge.png" alt="" width="1000" height="333" />

JAVA SCRIPT

var pic = document.getElementById('pic'); 

function rouge() { 
    pic.src = "images/link_rouge.png"; 
} 

function blue() { 
    pic.src = "images/link_blue.png"; 
}

我瞭解的功能已經與按鈕的工作，因爲他們都在影響着頁面上一些div改變顏色的唯一的東西不改變的圖像。

來源

2016-02-26 cosmichero2025

EventTarget.addEventListener()方法在指定的EventTarget上註冊指定的偵聽器。

使用addEventListener在button元素附加click事件和綁定你的處理函數的事件。

試試這個：

var pic = document.getElementById('pic'); 
 

 
function rouge() { 
 
    pic.src = "http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png"; 
 
} 
 

 
function blue() { 
 
    pic.src = "http://bin.smwcentral.net/u/1944/Link%2BBlue%2BTP%2Bshrunk.png"; 
 
} 
 
document.getElementById('btn1').addEventListener('click', rouge); 
 
document.getElementById('btn2').addEventListener('click', blue);

img { 
 
    width: 200px; 
 
}

<button id='btn1'>rouge</button> 
 
<button id='btn2'>blue</button> 
 
<br/> 
 
<img class="trans" id="pic" src="http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png" alt="" width="1000" height="333" />

來源

2016-02-26 04:37:37 Rayon

你的例子ddin't工作，即時通訊使用onclick ....公平我應該包括按鈕的HTML – cosmichero2025

這是奇怪的前兩次我試了一下，它沒有工作。但現在它確實沒關係嘗試你的 – cosmichero2025

原來問題是我在更改圖像之前試圖更改div的.style.backgroundcolor。不知道究竟是什麼樣的問題，但我確實開始使用addEventListener，我喜歡並將使用它們而不是onClick（）方法。 – cosmichero2025

有前pic設置等於document.getElementById('pic');您的頁面沒有加載的機會。

您可以使用類似JQuery的$(document).ready()函數來確保您的頁面在分配pic變量前完全加載。

$(document).ready(function() { 
    var pic = document.getElementById('pic'); 

    function rouge() { 
     pic.src = "images/link_rouge.png"; 
    } 

    function blue() { 
     pic.src = "images/link_blue.png"; 
    } 
});

注意：您需要將JQuery庫拉入您的項目才能使用此方法。請參閱here。

此外，您可以閱讀this post瞭解更多關於HTML/JavaScript和頁面加載的信息。

來源

2016-02-26 04:37:55 Mike

這打破了我所有的代碼，並沒有任何工作XD – cosmichero2025

你拉入JQuery？如果你沒有，你將無法使用'$'和document.ready方法。 – Mike

嘗試在你的html中包含這個。 '' – Mike

如何用javascript更改img src？

回答

相關問題