Javascript change img src on load

Question

I'm trying to use Javascript to change an img src on load. But what I've got doesn't seem to want to work. Any ideas?

(The difference in the img src is png and svg)

HTML

<img class="fusion-logo-1x" src="//new.network-data-cabling.co.uk/wp-content/uploads/2016/08/ACCL_Logo.png" width="400">

In <script> tag in <head>

window.onload = function() {
    document.getElementsByClassName("fusion-logo-1x").src = "//new.network-data-cabling.co.uk/wp-content/uploads/2016/08/ACCL_Logo.svg";
};

Link to JSfiddle

`getElementsByClassName` return nodeList.. Use `id` attribute with `getElementById` — Rayon, Aug 26 '16 at 12:12

score 1 · Accepted Answer · answered Aug 26 '16 at 12:12

1

Document.getElementsByClassName() returns an array-like object, You need to use index to iterate and access it's properties.

document.getElementsByClassName("fusion-logo-1x")[0].src = "//new.network-data-cabling.co.uk/wp-content/uploads/2016/08/ACCL_Logo.svg";

answered Aug 26 '16 at 12:12

Satpal

132,252
13
159
168

Alternatively with [`setAttribute()`](http://www.w3schools.com/jsref/met_element_setattribute.asp) -- `document.getElementsByClassName("fusion-logo-1x")[0].setAttribute("src","//new.network-data-cabling.co.uk/wp-content/uploads/2016/08/ACCL_Logo.svg");` -- edit SO kills the second slash... – AlexG Aug 26 '16 at 12:19
Ahh, of course! Makes sense that it'd be an array. Thanks so much! – GiggleSquid Aug 26 '16 at 12:27

score 0 · Answer 2 · answered Aug 26 '16 at 12:42

0

Use this script

window.onload = function() {
    document.getElementsByClassName("fusion-logo-1x")[0].src = "//new.network-data-cabling.co.uk/wp-content/uploads/2016/08/ACCL_Logo.svg";
};

answered Aug 26 '16 at 12:42

Tarek Salah uddin Mahmud

924
8
18

Javascript change img src on load

2 Answers2