Question

我知道还有其他这样的问题，我已经尝试过这些问题，我只是不知道自己到底做错了什么。我已将pic变量声明为与图片相关联，并且相应的ID为＆＃39; pic＆＃39;我已经尝试了许多不同的例子，并尝试按照这样的其他问题但无济于事。

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

我希望图像能够通过点击按钮将其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上注册指定的侦听器。

使用addEventListener覆盖button个元素来附加click个事件，并将处理函数绑定到这些事件。

试试这个：

＆＃13;

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);

＆＃13;

img {
  width: 200px;
}

＆＃13;

<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" />

＆＃13;

Answer 2

在将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库拉入项目以使用此方法。请参阅here。

另外，您可以阅读this post以了解有关HTML / JavaScript和页面加载的更多信息。

如何用javascript更改img src？

2 个答案: