javascript replace url link loop

Question

I am a beginner for Javascript, read several post here but could not get my codes work. Hope you can explain the solution :)

So basically I have four set of images, but I need to replace all of the $_12.JPGto $_57.JPG in their URL so I get bigger size of pictures (only images that are assigned to class="ebay" / id="ebay"). I need this to be executed when the browser starts reading the page, no events or buttons involved.

The following is my source code:

<div>
<img class="ebay" id="ebay" u="image" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/neAAAOSwrklU28I8/$_12.JPG?set_id=880000500F">
<img u="thumb" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/neAAAOSwrklU28I8/$_12.JPG?set_id=880000500F">
</div>
<div>
<img class="ebay" id="ebay" u="image" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/r8cAAOSwNSxU28I9/$_12.JPG?set_id=880000500F">
<img u="thumb" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/r8cAAOSwNSxU28I9/$_12.JPG?set_id=880000500F">
</div>
<div>
<img class="ebay" id="ebay" u="image" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/HLgAAOSwPhdU28I-/$_12.JPG?set_id=880000500F">
<img u="thumb" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/HLgAAOSwPhdU28I-/$_12.JPG?set_id=880000500F">
</div>
<div>
<img class="ebay" id="ebay" u="image" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/6VkAAOSwPYZU28I-/$_12.JPG?set_id=880000500F">
<img u="thumb" src="http://i.ebayimg.com/00/s/NzgwWDc4MA==/z/6VkAAOSwPYZU28I-/$_12.JPG?set_id=880000500F">
</div>

I also like to loop the function so when I have more than 4 sets of pictures (maximum 15 sets) and the javascript can still replace the URL for me.

The following is what I had tried:

window.onload = function() {

    for ( var i = 0; i < currentLink.length; i++) {

    var currentLink=document.getElementByClassName('ebay');
    var newLink = currentLink.src.replace('$_12.JPG','$_57.JPG');
    currentLink.src = newLink;

    }
}

@Rakesh_Kumar No, it doesn't, it returns (when correctly written) a HTMLCollection which is an object. — Teemu
– Teemu, Commented Feb 16, 2015 at 18:13
Note that technically speaking, window.onload IS an event... actually you seem quite close to the solution... — Laurent S.
– Laurent S., Commented Feb 16, 2015 at 18:15
@Teemu Isn't HTMLCollection is a collection of elements..so to say Array? — Rakesh_Kumar
– Rakesh_Kumar, Commented Feb 16, 2015 at 18:15
It's not an array, the said object doesn't have methods like pushor pop etc. — Teemu
– Teemu, Commented Feb 16, 2015 at 18:16
@Teemu Well if its an object.. how does it supports length property? — Rakesh_Kumar
– Rakesh_Kumar, Commented Feb 16, 2015 at 18:19

haim770 · Accepted Answer · 2015-02-16 18:17:37Z

1

You have to realize that getElementsByClassName returns an HTMLCollection, not a single element. So you cannot simply change all the elements in the collection by accessing the .src property of the collection.

You need to iterate over the collection to do this:

var currentLinks = document.getElementsByClassName('ebay');

Array.prototype.forEach.call(currentLinks, function(currentLink) {
    var newLink = currentLink.src.replace('$_12.JPG','$_57.JPG');
    currentLink.src = newLink;
});

Also, you have a typo in your getElementByClassName (you're missing the s in Elements).

See MDN

answered Feb 16, 2015 at 18:17

haim770

49.2k7 gold badges113 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

void · Accepted Answer · 2015-02-16 18:23:22Z

0

Misplacement of var currentLink=document.getElementByClassName('ebay');

Do,

window.onload = function() {

    var currentLink=document.getElementsByClassName('ebay');
    for ( var i = 0; i < currentLink.length; i++) { 
    var newLink = currentLink[i].src.replace('$_12.JPG','$_57.JPG');
    currentLink[i].src = newLink;
    }
}

edited Feb 16, 2015 at 18:23

answered Feb 16, 2015 at 18:12

void

36.7k10 gold badges71 silver badges111 bronze badges

1 Comment

Rakesh_Kumar Over a year ago

Will give error....As you have done typo mistake getElementByClassName instead of getElementsByClassName..

Collectives™ on Stack Overflow

javascript replace url link loop

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related