如何用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？

回答

相关问题