need to use getElementById many times to change im

Question

I'm trying to use getElementById in external .js file to change img src so it's easier to change my images from one file instead of having to go through hundreds of files I'm linking images from different dropshipping websites if there is an easier way of doing this I would be grateful if someone could help me thanks it also doesn't work the way I'd like here is my code:

JavaScript:

document.getElementById("item4").src = "item2.jpg"
document.getElementById("item5").src = "item62.jpg"
document.getElementById("item6").src = "item4.jpg"
document.getElementById("item7").src = "item5.jpg";
document.getElementById("item8").src = "item6.jpg";
document.getElementById("item9").src = "item3.jpg";
document.getElementById("item10").src = "item43.jpg";
document.getElementById("item11").src = "item43.jpg";
document.getElementById("item12").src = "item43.jpg";
document.getElementById("item13").src = "item43.jpg";

HTML:

<img class="images" id="item2" src="" alt="dress"/>

Answer 1

If you really need to get each of those items and remap their .src properties, I might just write a loop.

var imageMappings = [
    { id: 'item4', src: 'item2.jpg' },
    { id: 'item5', src: 'item62.jpg' },
    { id: 'item6', src: 'item4.jpg' },
    // etc...
]

Then loop over the array and tie up your mappings:

for (var i=0; i < imageMappings.length; i += 1) {
    document.getElementById(imageMappings[i].id).src = imageMappings[i].src;
}

Answer 2

If you just want to map an id value to a filename, you can make a map of the two:

var data = {
    item4: "item2.jpg",
    item5: "item62.jpg",
    item6: "item4.jpg",
    item7: "item5.jpg",
    ....
};

And, then make a loop that goes through them the map data structure and assigns them all:

for (var id in data) {
    document.getElementById(id).src = data[id];
}

In general, putting more of this in a data structure and less in code is simpler and easier to maintain and debug.

---

If you have all these image tags in your HTML, you could also put the filename on a custom attribute for each image tag.

<img id="item4" class="altImg" src="whatever.jpg" data-alternate="item2.jpg">

Then, you could just switch all items like this:

function switchImages() {
    var imgs = document.getElementsByClassName("altImg");
    var alternateSrc;
    for (var i = 0; i < imgs.length; i++) {
        alternativeSrc = imgs[i].getAttribute("data-alternate");
        if (alternativeSrc) {
            imgs[i].src = alternativeSrc;
        }
    }
}

This function would automatically operate on any image with the right class name and the appropriate custom attribute and ignore any images without those properties.

The advantage of this type of code is that the HTML is the only data structure you need. Just add a new image, give it the right class and the right custom property and it's automatically included in the switchImages() algorithm.