如何使用JavaScript更改img src？

Question

我知道还有其他类似问题，但我一直尝试关注这些问题，但我不知道自己到底在做什么错。我已声明该pic变量已链接到具有相应ID“ pic”的图像，并且尝试了许多不同的示例，并尝试遵循类似这样的其他问题，但无济于事。

-真正的问题----

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

HTML：

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

JavaScript：

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

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

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

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

Answer 1

该EventTarget.addEventListener()方法在调用的EventTarget上注册指定的侦听器。

使用addEventListenerover 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" />