object HTMLImageElement apeearing from jQuery when trying to insert images - html

Question

So here is what I'm trying to do:
Display a pattern that is randomly created with images, but keep getting the [object HTML Image Element] box appearing
var s1 = [];
s1[0] = new Image();
s1[0].src = '11.jpg';
s1[1] = new Image();
s1[1].src = '12.jpg';
s1[2] = new Image();
s1[2].src = '13.jpg';
s1[3] = new Image();
s1[3].src = '14.png';
s1[4] = new Image();
s1[4].src = '15.png';
var s2 = [];
s2[0] = new Image();
s2[0].src = '21.jpg';
s2[1] = new Image();
s2[1].src = '22.jpg';
s2[2] = new Image();
s2[2].src = '23.jpg';
s2[3] = new Image();
s2[3].src = '24.png';
s2[4] = new Image();
s2[4].src = '25.jpg';
var s3 = [];
s3[0] = new Image();
s3[0].src = '31.jpg';
s3[1] = new Image();
s3[1].src = '32.jpg';
s3[2] = new Image();
s3[2].src = '33.jepg';
s3[3] = new Image();
s3[3].src = '34.jpg';
s3[4] = new Image();
s3[4].src = '35.gif';
The arrays are now created, I want it to randomly pick 1 of the 5 to use, which seems to be working fine
p1 = Math.floor(Math.random() * 5 + 1);
p2 = Math.floor(Math.random() * 5 + 1);
p3 = Math.floor(Math.random() * 5 + 1);
if(p1 == 1) {
p1 = s1[0];
} else if (p1 == 2) {
p1 = s1[1];
} else if (p1 == 3) {
p1 = s1[2];
} else if (p1 == 4) {
p1 = s1[3];
} else if (p1 == 5) {
p1 = s1[4];
}
This exact same if/ else if structure is done for p2 and p3, I wont copy and paste it in to save space, now I want to output the final pattern, which is when i'm getting the object HTML image element appearing
while(repeat > 0){
pattern = p1 + p2 + p3 + pattern;
repeat --;
}
correctAnswer = 1;
$("#patternSpan").html(pattern)

Answer 1

Probelm
What does it mean to add images to each other?
Should all the rgb values for each pixel be added together? Should it create a new image with the pixels appended? appended to which side?
Neither of these things make sense for a language to automatically do, so whats happening here:
pattern = p1 + p2 + p3 + pattern;
Is that javascript is trying to decide if + means numeric addition or string concatenation.
Because the values aren't numbers, JS defaults to string concatenation.
What happens to a non-string when you attempt string concatenation?
JS calls .toString() on the value first
Turns out the string value for an image is [object HTML Image Element]
Solution
So what you want to do is append the images to #patternSpan. So instead of adding the images together, append them to the span:
$("#patternSpan").append(p1, p2, p3)
Side note
The section where you randomly pick the images can be cleaned up a lot by doing this instead:
idx1 = Math.floor(Math.random() * 5 + 1);
idx2 = Math.floor(Math.random() * 5 + 1);
idx3 = Math.floor(Math.random() * 5 + 1);
p1 = s1[idx1];
p2 = s2[idx2];
p3 = s3[idx3];
You should also avoid re-using variables like p1 for different types of things, ie storing a random number and storing an image.
You are more likely to run into type related bugs if a variable can contain multiple possible types.