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

Solution 1

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

Solution 2

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

Comments

[Al.G.]

But the image's src is image/placeholder.png, it will be changed so: 01.png, it should be image/01.png

[TheLovelySausage]

this answered smacked it, smacked it hard, thanks to everyone :D

[TheLovelySausage]

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?

[Amit Joki]

use document.getElementById('id of image')

[TheLovelySausage]

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]

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

[Amit Joki]

do you want to do that for every image?

[TheLovelySausage]

yes for every image, it should only effect the sources that will have "placeholder.png" anyway

[TheLovelySausage]

so document.querySelectorAll("img")["all?"]

[TheLovelySausage]

Not for this project no

[Amit Joki]

check out my answer now

[TheLovelySausage]

The new version for your solution is working perfectly although I have shortened it slightly to be able to work on multiple images

[TheLovelySausage]

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]

function changeSourceAll() {<br/> var images = document.querySelectorAll("img");<br/> for (var i = 0; i < images.length; i++)<br/> images[i].src = images[i].src.replace("placeholder01.png", "update01.png");<br/> for (var i = 0; i < images.length; i++)<br/> images[i].src = images[i].src.replace("placeholder02.png", "update02.png");<br/> } changeSourceAll();

[TheLovelySausage]

omg I don't know how to work the formatting in the comments :{