如何使用javascript更改img src？

我知道还有其他类似的问题，我也试着去关注它们，只是不知道我到底做错了什么。我已经声明

pic

变量链接到具有相应id“pic”的图像，并且我尝试了许多不同的示例，并尝试遵循类似于此的其他问题，但没有效果

---真正的问题----

我希望通过点击按钮，将图像的src更改为我工作区中的另一个src

HTML:

我知道这些功能已经可以与按钮一起使用了，因为它们会影响页面上一些改变颜色的div。唯一不变的是图像

EventTarget.addEventListener（）方法在调用它的EventTarget上注册指定的侦听器

使用
按钮
元素附加
单击
事件，并将处理程序函数绑定到这些事件


var pic=document.getElementById（'pic'）；
功能胭脂（）{
pic.src=”http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png";
}
函数蓝（）{
pic.src=”http://bin.smwcentral.net/u/1944/Link%2BBlue%2BTP%2Bshrunk.png";
}
document.getElementById（'btn1'）。addEventListener（'click'，rouge）；
document.getElementById（'btn2'）。addEventListener（'click'，蓝色）
img{
宽度：200px；
}
胭脂
蓝色


在将
pic
设置为等于
document.getElementById（'pic'）之前，您的页面可能没有加载过

您可以使用jQuery的
$（document.ready（）
函数（或
document.addEventListener（“DOMContentLoaded”，handler）；
）来确保在分配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库拉入项目中才能使用此方法。看

此外，您还可以通过阅读了解更多有关HTML/JavaScript和页面加载的信息。
您的示例不起作用，我正在使用onclick。。。。公平地说，我应该把按钮也包括进去，因为头两次我试的时候按钮很奇怪，但都没用。但是现在一切都好了，我会试试你的照片，问题是在我改变照片之前，我试图改变Div的.style.backgroundcolor。我不知道到底是什么样的问题，但我确实开始使用you addEventListener，我非常喜欢并将使用它们而不是onClick（）方法。你引入JQuery了吗？如果没有，您将无法使用
$
和document.ready方法。请尝试将其包含在html中<代码>
发现问题在于，在更改图像之前，我试图更改div的.style.backgroundcolor。不知道到底是什么问题。谢谢你的建议。
var pic = document.getElementById('pic');

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

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

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

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

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