如何使用JavaScript向图像src添加参数？

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" />

Answer 1

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:

1. 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.
2. I also never saw any place where you initialized y .
3. 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.
4. 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.
5. Changed to icons[x] since y is no longer used.
6. Moved the definition and initialization of icons into the function since I see no reason it needs to be a global either.
7. 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);

Answer 2

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?