very very basic issue

[tictike]

I'm new to js. I thought it is ok to concatenate variables and strings. Can someone please tell me why the below prints:

images/dwa76_1.jpg
images/dwa76_1.jpg
images/dwa76_1.jpg
images/dwa76_1.jpg

instead of:

images/dwa76_1.jpg
images/dwa76_2.jpg
images/dwa76_3.jpg
images/dwa76_4.jpg

var num = 1;

var newThumbnailImg = "images/dwa76_" + num + ".jpg";

function initAll(){
document.write(newThumbnailImg + "<br>");
num++;
document.write(newThumbnailImg + "<br>");
num++;
document.write(newThumbnailImg + "<br>");
num++;
document.write(newThumbnailImg + "<br>");
}

[PicklePete]

Try using a for loop, like so:

function init() {
	for(var i = 1; i <= 4; i++) {
		var newThumbnailImg = "images/dwa76_" + i + ".jpg";
		document.write(newThumbnailImg + "<br />");
	}
}
init();

[tictike]

thanks, that works. but still, why does the code above print

images/dwa76_1.jpg
images/dwa76_1.jpg
images/dwa76_1.jpg
images/dwa76_1.jpg

instead of:

images/dwa76_1.jpg
images/dwa76_2.jpg
images/dwa76_3.jpg
images/dwa76_4.jpg

can't i concatenate variables and strings like i did?

[Christopher Hill]

newThumbnailImg contains a string which you generated through concatination. It is not a dynamic string. If you increment the counter, num, you are doing just that--incrementing the counter and not updating the newThumbnailImg variable.

[tictike]

oh ok, that makes sense. so what could i do if i wanted to make newThumbnailImg a dynamic string?

[paul_wilkins]

If you used the following it would work

var num = 1;
 
var newThumbnailImg = function () {
	return "images/dwa76_" + num + ".jpg";
}
 
function initAll(){
document.write(newThumbnailImg() + "<br>");
num++;
document.write(newThumbnailImg() + "<br>");
num++;
document.write(newThumbnailImg() + "<br>");
num++;
document.write(newThumbnailImg() + "<br>");
}
initAll();

You could simplify that even further with

var newThumbnailImg = function (num) {
	return function () {
		return "images/dwa76_" + (num++) + ".jpg";
	};
}(1);
 
function initAll(){
document.write(newThumbnailImg() + "<br>");
document.write(newThumbnailImg() + "<br>");
document.write(newThumbnailImg() + "<br>");
document.write(newThumbnailImg() + "<br>");
}
initAll();

[tictike]

In the second example, how does the variable newThumbnailImg know that the "1" on the last line is num?

[paul_wilkins]

Let's show the code in a different way that you're more familiar with.

function newThumbnailImg(num) {
   ...
};
newThumbnailImg(1);

You can also assign a function to a variable argument.

var newThumbnailImg = function (num) {
   ...
};
newThumbnailImg(1);

And so it is just a small step to call the function at the same time as you create it.

var newThumbnailImg = function (num) {
   ...
}(1);

[tictike]

so this is a shorthand way of passing an argument to a function?

[paul_wilkins]

The anonymous function provides closure, so that num can be retained for when the event calls it, and the function itself is being instantiated at the same time as it's being defined.

Have a look at the functions section at http://javascript.crockford.com/survey.html
The function statement is what's commonly used, but it's really shorthand for the functions statement which has been made use of in the above code.