How to add an argument to an image src using JavaScript?

Question

In other words, how can I take an argument passed to a function, and place it in the middle of an src that is being defined in the same code?

Note: Please no jQuery. Thank you.

Here's my code:

JavaScript:

<script>
var icons = document.getElementsByClassName( 'icon' ); // All elements of the "icon" class.
var x, y; // Counters.

/* The purpose of the below function is to assign images to 8 members of the same 
class, given a piece of the image name from an argument passed to a function. */

function example ( test1, test2, test3, test4, test5, test6, test7, test8 )
{
    for ( x = 0; x < arguments.length, y < (y + 8); x++, y++ )
    {
        icons[y].src = 'http://example.com/img/' + arguments[x] + '.jpg';
    }
}
</script>

HTML:

<img class="icon" src="" />
<img class="icon" src="" />
<img class="icon" src="" />
<img class="icon" src="" />
<img class="icon" src="" />
<img class="icon" src="" />
<img class="icon" src="" />
<img class="icon" src="" />
<img onclick="example(1, 2, 3, 4, 5, 6, 7, 8)" src="example.jpg" />

And what isn't working, other than the insane amount of arguments and the strange loop, it seems okay ? — adeneo, Dec 16 '14 at 21:58
If the image is broken, then your URL is not correct. The URLs you are creating with your code looks like this: `http://example.com/img/1.jpg`. Are you 100% sure that is the correct URL because it should work if that URL exists and is an image. — jfriend00, Dec 16 '14 at 22:02
I don't see you initialize `y` anywhere. I needs an initial value. Also, the test for `y < (y + 8)` is by definition ALWAYS true. What are you trying to do with that. — jfriend00, Dec 16 '14 at 22:04

jfriend00 · Accepted Answer · 2014-12-16T22:17:41.063

It is not 100% clear why it isn't working for you. My first guess would be that you aren't quite building the URL string correctly. The URLs you are creating will look like this:

http://example.com/img/1.jpg
http://example.com/img/2.jpg
http://example.com/img/3.jpg

In addition, there's some funny business with your for loop and the y test in that loop. You can clean that up (in case that's causing an issue) by changing to this:

function go(/* args go here */) {
    var icons = document.getElementsByClassName("icon");
    for(var x = 0; x < arguments.length; x++)
        icons[x].src = "http://example.com/img/" + arguments[x] + ".jpg";
}

Here are the changes and why:

I removed the y part of the for loop because y < (y + 8) is always true so there's no point in having it as a test for the for loop.
I also never saw any place where you initialized y.
You were using the comma operator in your condition, not the && operator which also seemed wrong. Multiple conditions in the if condition should use boolean operators, not the comma operator.
x was a global. I changed it to a local variable since it is initialized and used locally and it's a dangerous name for a global.
Changed to icons[x] since y is no longer used.
Moved the definition and initialization of icons into the function since I see no reason it needs to be a global either.
Removed the definition of the arguments since the named arguments were not being used.

If, what you were trying to do is to make sure you never went past the last icon, then your loop can just be this:

function go(/* args go here */) {
    var icons = document.getElementsByClassName("icon");
    for (var x = 0; x < arguments.length && x < icons.length; x++)
        icons[x].src = "http://example.com/img/" + arguments[x] + ".jpg";
}

Then, lastly if all you want to do is create the URLs as a sequence, you can just pass the begin and ending sequence numbers:

function go(begin, end) {
    var icons = document.getElementsByClassName("icon");
    for (var x = 0; x < icons.length && begin <= end; x++, begin++)
        icons[x].src = "http://example.com/img/" + begin + ".jpg";
}

go(1, 8);

score 0 · Answer 2 · edited May 23 '17 at 12:05

You can pass the arguments as URL parameters (querystring).

<img src="myImage.png?test1=bla&test2=3&test4=blablala&test5=etc" />

You can then retrieve them like this:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

https://stackoverflow.com/a/901144/2407212

Can you maybe just explain what you are trying to achieve?

How to add an argument to an image src using JavaScript?

2 Answers2