Javascript 如何使用javascript更改img src？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35643490/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change an img src with javascript?
提问by cosmichero2025
I know there are other questions like this and I've tried following them I'm just not aware of what exactly I'm doing wrong. I've declared the picvariable as being linked to the image with the corresponding id of 'pic' and I've tried many different examples and trying to follow other questions like this but to no avail.
我知道还有其他类似的问题，我已经尝试过关注它们，但我不知道我到底做错了什么。我已将pic变量声明为链接到具有相应 id 'pic' 的图像，并且我尝试了许多不同的示例并尝试遵循类似的其他问题，但无济于事。
--- THE REAL QUESTION ----
--- 真正的问题 ----
I would like the image to change its src to another one that I have in my workspace with the click of a button.
我希望通过单击按钮将图像的 src 更改为我在我的工作区中拥有的另一个。
HTML:
HTML：
<img class="trans" id="pic" src="images/link_rouge.png" alt="" width="1000" height="333" />
JavaScript:
JavaScript：
var pic = document.getElementById('pic');
function rouge() {
pic.src = "images/link_rouge.png";
}
function blue() {
pic.src = "images/link_blue.png";
}
I know the functions already work with the buttons because they are affecting some divs on the page that change color the only things not changing are the images.
我知道这些功能已经与按钮一起使用了，因为它们会影响页面上的一些 div，这些 div 会改变颜色，唯一不变的是图像。
回答by Rayon
The
EventTarget.addEventListener()method registers the specified listener on the EventTarget it's called on.
该
EventTarget.addEventListener()方法在它被调用的 EventTarget 上注册指定的侦听器。
Use addEventListenerover buttonelements to attach clickevents and bind your handler functions to those events.
使用addEventListeneroverbutton元素附加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" />回答by Mike
There's a chance your page has not loaded before picis set equal to document.getElementById('pic');.
您的页面有可能在pic设置为等于之前尚未加载document.getElementById('pic');。
You can use something like jQuery's $(document).ready()function (or document.addEventListener("DOMContentLoaded", handler);) to ensure your page is fully loaded before assigning the pic variable.
在分配 pic 变量之前，您可以使用类似 jQuery 的$(document).ready()函数（或document.addEventListener("DOMContentLoaded", handler);）来确保您的页面已完全加载。
$( document ).ready(function() {
var pic = document.getElementById('pic');
function rouge() {
pic.src = "images/link_rouge.png";
}
function blue() {
pic.src = "images/link_blue.png";
}
});
Note: You will need to pull the JQuery library into your project to use this method. See here.
注意：您需要将 JQuery 库拉入您的项目才能使用此方法。见这里。
Also, you can read this postto learn a little more about HTML/JavaScript and page loading.
此外，您可以阅读这篇文章以了解有关 HTML/JavaScript 和页面加载的更多信息。
