How do I create an array of images and attach it to another array?

[maureenv]

Hi I'm working on a memory game, and I want to attach images to my cards so that the player has to match images instead of letters. I found this code online that shows how to make an array of images, I'm not sure if there's an easier way to do it:

`var pictures = new Array(3); var counter = 0;

function initialize(){ // sets up the array with some startin values // Andy Harris pictures[0] = new Image(50, 50); pictures[0].src = "blank.gif"; pictures[1] = new Image(50, 50); pictures[1].src = "triangle.gif"; pictures[2] = new Image(50, 50); pictures[2].src = "circle.gif"; pictures[3] = new Image(50, 50); pictures[3].src = "square.gif";

} // end initialize `

Once I create that array of images I want to add it to my array of letters: cardArray=["A","A","B","B","C","C","D","D","E","E","F","F"]; However, this cardArray is already attached to some CSS styling. Would attaching an image to an array that already has CSS styling mess everything up?

Thank you

Link to my game http://maureenv.github.io/project1/

[RobertAKARobin]

Make sure you use three backtics at the start and end of your block of code, Maureen! The backtics should be on a line by themselves.

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code

[maureenv]

Hopefully this works

var pictures = new Array(3);
var counter = 0;

function initialize(){
// sets up the array with some startin values
pictures[0] = new Image(50, 50);
pictures[0].src = "blank.gif";
pictures[1] = new Image(50, 50);
pictures[1].src = "triangle.gif";
pictures[2] = new Image(50, 50);
pictures[2].src = "circle.gif";
pictures[3] = new Image(50, 50);
pictures[3].src = "square.gif";

} // end initialize 

[maureenv]

I did it

[RobertAKARobin]

Yasss.

I'm not sure what you mean by an array having CSS styling... You can't style an array. But what if instead your array looked something like this:

cardArray=[
  {text: "A", image: "triangle.gif"},
  {text: "B", image: "circle.gif"}
];

Then, modify this line:

var arrayNumber=document.createTextNode(cardArray[i]);

...to this:

var arrayNumber=document.createTextNode(cardArray[i].text);

...and add in the code to create your image.

[maureenv]

Ohhhh! That looks like it might work. Awesome thank you.