Javascript replacing image source

Question

I am trying to change the contents of the src tag within a web page (without changing the HTML/naming structure)

My code looks something like this at the moment:

....

<div class="main">
    <button>
        <img src="image/placeHolder.png"/>
        <div>the nothing</div>
    </button>
</div>

....

I need to change the src of this img tag My javascript looks like this at the moment

....

<script type="text/javascript">

function changeSource() {

    var image = document.querySelectorAll("img");
    var source = image.getAttribute("src").replace("placeHolder.png", "01.png");
    image.setAttribute("src", source);
}

changeSource();

</script>

....

I have no idea why it isn't working but I'm hoping someone out there does :D

by the way I used the ^ instead of > because the editor kept turning it into HTML — TheLovelySausage, Mar 26 '14 at 15:14
There is a "Code Sample" button in the editor that you can use to format your code snippets. I updated your question and removed the wings. :) — Brandon Boone, Mar 26 '14 at 15:18
`document.querySelectorAll()` returns NodeList, you need to use `querySelector` or just access the first (or any other) element e.g. `image[0]`. — Ilya I, Mar 26 '14 at 15:20

Amit Joki · Accepted Answer · 2014-03-26T16:03:59.470

4

Change your function to:

function changeSource() {
    var image = document.querySelectorAll("img")[0];
    var source = image.src = image.src.replace("placeholder.png","01.png");
}
changeSource();

querySelectorAll returns an array. I took the first one by doing [0].

But you should use document.getElementById('id of img here') to target a specific <img>

If you want to target all <img> that has placeholder.png.

function changeSourceAll() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        if (images[i].src.indexOf('placeholder.png') !== -1) {
            images[i].src = images[i].src.replace("placeholder.png", "01.png");
        }
    }
}
changeSourceAll();

edited Mar 26 '14 at 16:03

answered Mar 26 '14 at 15:19

Amit Joki

58,320
7
77
95

But the image's src is `image/placeholder.png`, it will be changed so: `01.png`, it should be `image/01.png` – Al.G. Mar 26 '14 at 15:21
this answered smacked it, smacked it hard, thanks to everyone :D – TheLovelySausage Mar 26 '14 at 15:29
although I do have one more question regards to this answer. how will I be able to apply this same selector and format when the image number [0] is undetermined? – TheLovelySausage Mar 26 '14 at 15:34
use `document.getElementById('id of image')` – Amit Joki Mar 26 '14 at 15:35
I'm unable to use ids because the web page I am editing is set to generate it's own ids through php, so the ids are always randomized as the img elements are invoked. Is there a way to use [0] but to use it as ["any number"] not like that ofcors but in the correct syntax – TheLovelySausage Mar 26 '14 at 15:50
do you want to do that for every image? – Amit Joki Mar 26 '14 at 15:51
yes for every image, it should only effect the sources that will have "placeholder.png" anyway – TheLovelySausage Mar 26 '14 at 15:52
so document.querySelectorAll("img")["all?"] – TheLovelySausage Mar 26 '14 at 15:53
Not for this project no – TheLovelySausage Mar 26 '14 at 15:55
The new version for your solution is working perfectly although I have shortened it slightly to be able to work on multiple images – TheLovelySausage Mar 27 '14 at 06:25
function changeSourceAll() { var images = document.querySelectorAll("img"); for (var i = 0; i < images.length; i++) images[i].src = images[i].src.replace("placeholder01.png", "update01.png"); for (var i = 0; i < images.length; i++) images[i].src = images[i].src.replace("placeholder02.png", "update02.png"); } changeSourceAll(); – TheLovelySausage Mar 27 '14 at 06:27
function changeSourceAll() {
var images = document.querySelectorAll("img");
for (var i = 0; i < images.length; i++)
images[i].src = images[i].src.replace("placeholder01.png", "update01.png");
for (var i = 0; i < images.length; i++)
images[i].src = images[i].src.replace("placeholder02.png", "update02.png");
} changeSourceAll(); – TheLovelySausage Mar 27 '14 at 06:30
omg I don't know how to work the formatting in the comments :{ – TheLovelySausage Mar 27 '14 at 06:31

score 2 · Answer 2 · answered Mar 26 '14 at 15:21

2

function changeSource() {
   var img = document.getElementsByTagName('img')[0];
   img.setAttribute('src', img.getAttribute('src').replace("placeHolder.png", "image.png"));
}

answered Mar 26 '14 at 15:21

Al.G.

4,327
6
31
56

this is an interesting way to use get/setAttribute that I didn't know about :D I will likely use this, thanks a bunch – TheLovelySausage Mar 26 '14 at 15:37

Javascript replacing image source

2 Answers2