Help putting Images in an Array. JavaScript

[Sergio45]

I have been failing on making an array with Images. I changed the code back to it's working state before I starting the edits for the image array. If any one can give me some tips or help on how to start the array. 

I will post the code and the functions that are giving me issues. 

Thanks in advanced for the help.

var $ = function(id) {return document.getElementById(id); }//end $

window.onload = function () 
{

	//Provide answer for Question 1 here
	
	//////////////////////
	
	spooks();

};



	function spooks() 
{
	var reindeerCounter=[];//the array for the counter 
	
	reindeerCounter[noname]=0;//the count for anything else that is not a reindeer
	reindeerCounter["blitzen"]=0;//the count for blitzen
	reindeerCounter["comet"]=0;//the count for comet
	reindeerCounter["cupid"]=0;//the count for cupid
	reindeerCounter["dancer"]=0;//the count for dancer
	reindeerCounter["dasher"]=0;//the count for dasher
	reindeerCounter["donner"]=0;//the count for donner
	reindeerCounter["prancer"]=0;//the count for prancer
	reindeerCounter["rudolph"]=0;//the counter for rudolph
	reindeerCounter["vixen"]=0;//the counter for vixen 
	reindeerCounter["bumble"]=0;//the counter bumble 
	
	var noname;//the counter for the noname reindeers
	
	var user;//what the user enters
	
	var reindeer ={names:["blitzen","comet","cupid","dancer","dasher","donner","prancer","rudolph","vixen","bumble"]};//the array for the reindeer names
	
	for (var n=0; n<1; n++)
	{
		do {
			user=prompt("Enter:blitzen, comet, cupid, dancer, dasher, donner, \nprancer, rudolph, vixen,and type exit to see score").toLowerCase();
			if(user===reindeer["names"][0])
			{
				reindeerCounter[user]++;
				
			}
			else if(user===reindeer["names"][1])
			{
				reindeerCounter[user]++;
				
			}
			else if(user===reindeer["names"][2])
			{
				reindeerCounter[user]++;
				
			}
			else if (user===reindeer["names"][3])
			{
				reindeerCounter[user]++;
				
			}
			else if (user===reindeer["names"][4])
			{
				reindeerCounter[user]++;
				
			}
			else if (user===reindeer["names"][5])
			{
				reindeerCounter[user]++;
				
			}
			else if (user===reindeer["names"][6])
			{
				reindeerCounter[user]++;
				
			}
			else if (user===reindeer["names"][7])
			{
				reindeerCounter[user]++;
				
			}
			else if (user===reindeer["names"][8])
			{
				reindeerCounter[user]++;
				
			}
			else if(user!==reindeer["names"])
			{
				reindeerCounter[noname]++;
				
			}
			
		}
		while (user!=="exit");
		displayThemSpooks(reindeerCounter[user]);
		
	}
	
	
	function displayThemSpooks(blitzen,bumble,comet,cupid,dancer,dasher,donner,noname,prancer,rudolph,vixen)
	
	{
		if(reindeerCounter["blitzen"] >1)
		{
			document.writeln("<p> blitzen was entered"+" "+reindeerCounter["blitzen"]+ " \n </p>");
			displayThemSpookspic(reindeerCounter["blitzen"],"blitzen");
		
			
		}
		else if(reindeerCounter["blitzen"]===0)
		{
			document.writeln("<p>blitzen was not spotted </p>");
			
		}
		else
		{
			document.writeln("<p> You entered"+" "+reindeerCounter["blitzen"]+ " blitzens</p>");
			displayThemSpookspic(reindeerCounter["blitzen"],"blitzen");
		
			
			
		}
		if(reindeerCounter["comet"] >1)
		{
			document.writeln("<p> comet was entered"+" "+reindeerCounter["comet"]+ " \n </p>");
			displayThemSpookspic(reindeerCounter["comet"],"comet");
			
		}
		else if(reindeerCounter["comet"]===0)
		{
			document.writeln("<p> comet was not spotted</p>");
			
		}
		else
		{
			document.writeln("<p> You entered"+" "+reindeerCounter["comet"]+" comets</p>");
			displayThemSpookspic(reindeerCounter["comet"],"comet");
			
		}
		if(reindeerCounter["cupid"] >1)
		{
			document.writeln("<p> cupid was entered"+" "+reindeerCounter["cupid"]+ " \n </p>");
			displayThemSpookspic(reindeerCounter["cupid"],"cupid");
			
		}
		else if(reindeerCounter["cupid"]===0)
		{
			document.writeln("<p> cupid was not spotted </p>");
			
		}
		else
		{
			document.writeln("<p> You entered"+" "+reindeerCounter["cupid"]+" cupids</p>");
			displayThemSpookspic(reindeerCounter["cupid"],"cupid");
			
		}
		if(reindeerCounter["dancer"] >1)
		{
			document.writeln("<p> dancer was entered"+" "+reindeerCounter["dancer"]+ " \n </p>");
			displayThemSpookspic(reindeerCounter["dancer"],"dancer");
			
		}
		else if(reindeerCounter["dancer"]===0)
		{
			document.writeln("<p> dancer was not spotted </p>");
			
		}
		else
		{
			document.writeln("<p> You entered"+" "+reindeerCounter["dancer"]+" dancers</p>");
			displayThemSpookspic(reindeerCounter["dancer"],"dancer");
			
		}
		if(reindeerCounter["dasher"] >1)
		{
			document.writeln("<p> dasher was entered"+" "+reindeerCounter["dasher"]+ " \n </p>");
			displayThemSpookspic(reindeerCounter["dasher"],"dasher");
			
		}
		else if(reindeerCounter["dasher"]===0)
		{
			document.writeln("<p> dasher was not spotted </p>");
			
		}
		else
		{
			document.writeln("<p> You entered"+" "+reindeerCounter["dasher"]+" dashers</p>");
			displayThemSpookspic(reindeerCounter["dasher"],"dasher");
			
		}
		if(reindeerCounter["donner"] >1)
		{
			document.writeln("<p> donner was entered"+" "+reindeerCounter["donner"]+ " \n </p>");
			displayThemSpookspic(reindeerCounter["donner"],"donner");
			
		}
		else if(reindeerCounter["donner"]===0)
		{
			document.writeln("<p> donner was not spotted </p>");
			
		}
		else
		{
			document.writeln("<p> You entered"+" "+reindeerCounter["donner"]+" donners</p>");
			displayThemSpookspic(reindeerCounter["donner"],"donner");
			
		}
		if(reindeerCounter["prancer"] >1)
		{
			document.writeln("<p> prancer was entered"+" "+reindeerCounter["prancer"]+ " \n </p>");
			displayThemSpookspic(reindeerCounter["prancer"],"prancer");
			
		}
		else if(reindeerCounter["prancer"]===0)
		{
			document.writeln("<p> prancer was not spotted </p>");
			
		}
		else
		{
			document.writeln("<p> You entered"+" "+reindeerCounter["prancer"]+" prancers</p>");
			displayThemSpookspic(reindeerCounter["prancer"],"prancer");
			
		}
		if(reindeerCounter["rudolph"] >1)
		{
			document.writeln("<p> rudolph was entered"+" "+reindeerCounter["rudolph"]+ " \n </p>");
			displayThemSpookspic(reindeerCounter["rudolph"],"rudolph");
			
		}
		else if(reindeerCounter["rudolph"]===0)
		{
			document.writeln("<p> rudolph was not spotted</p>");
			
		}
		else
		{
			document.writeln("<p> You entered"+" "+reindeerCounter["rudolph"]+" rudolphs</p>");
			displayThemSpookspic(reindeerCounter["rudolph"],"rudolph");
			
		}
		if(reindeerCounter["vixen"] >1)
		{
			document.writeln("<p> vixen was entered"+" "+reindeerCounter["vixen"]+ " \n </p>");
			displayThemSpookspic(reindeerCounter["vixen"],"vixen");
			
		}
		else if(reindeerCounter["vixen"]===0)
		{
			document.writeln("<p> vixen was not spotted </p>");
			
		}
		else
		{
			document.writeln("<p> You entered"+" "+reindeerCounter["vixen"]+" vixens</p>");
			displayThemSpookspic(reindeerCounter["vixen"],"vixen");
			
		}
		if(reindeerCounter[noname] >1)
		{
			document.writeln("<p> other was entered"+" "+reindeerCounter[noname]+ " \n </p>");
			displayThemSpookspic(reindeerCounter[noname],"bumble");
			
		}
		else if(reindeerCounter[noname]===0)
		{
			document.writeln("<p> other was not spotted</p>");
			
		}
		else
		{
			document.writeln("<p> You entered"+" "+" "+reindeerCounter[noname]+" noname</p>");
			displayThemSpookspic(reindeerCounter[noname],"bumble");
			
		}
	}
	
	

	
	
	function displayThemSpookspic(counters,spookPic )//have to change this and the way it gets photo to an array.
	{
		
		var imagesreindeer=[];
		
		
		imagesreindeer[0]="Images/blitzen.png";
		imagesreindeer[1]="Images/bumble.png";
		imagesreindeer[2]="Images/comet.png";
		imagesreindeer[3]="Images/cupid.png";
		imagesreindeer[4]="Images/dancer.png";
		imagesreindeer[5]="Images/dasher.png";
		imagesreindeer[6]="Images/donner.png";
		imagesreindeer[7]="Images/prancer.png";
		imagesreindeer[8]="Images/rudolph.png";
		imagesreindeer[9]="Images/vixen.png"; 
		
		
		
		for(var num=1;num<=counters;num++ )
		{
			var tag="<img src='Images/"+spookPic + ".png' alt='reindeer pictures' height='40' width='40'>";
			document.write(tag);
			
		}
		
	}
	
	
}

 

[vorticalbox]

What happened to you using an array of dictionaries (key->value) to store all your data? Seeing as you have multiple arrays why bother with the ['name'] part? 

 

deer[0] = 'name'

count[0] = 0

image[0] = 'image.jpg'

 

each number [0] would be the same in across all arrays.

 

You should also probably start learning OOP and make some classes.

 

 

function Deer(name, image){
	this.name = name;
	this.counter = 0;
	this.image = image;
}

Deer.prototype.count = function(){
    this.counter += 1;
};

Deer.prototype.message = function(message){
	document.writeln(message);
	document.writeln("<img src='" + this.image + "'>")
	
}

var blitzen = new Deer('blitzen','image.jpg')
var comet = new Deer('comet','comet.jpg')

//count on blitzen
blitzen.count();
//blitzen message
blitzen.message('That red nose guy sucks :(');

//count comet
comet.count();
//message from comet
comet.message('Blitzen eats SO much');

 

[Sergio45]

17 minutes ago, vorticalbox said:

Deer.prototype.message = function(message){ document.writeln(message); document.writeln("<img src='" + this.image + "'>")

I was going that route but the assignment and the instructor wanted us to follow his examples. I rather be doing OOP but we need to follow his example. Any way your statment that is above. Do you insert the src of the image between "<img src='source/source' " + this.image + '">")? 

Thanks for the help.

[Sergio45]

function spooks() 
{
	var reindeerCounter=[];//the array for the counter 
	
	//reindeerCounter[noname]=0;//the count for anything else that is not a reindeer
	
	reindeerCounter["blitzen"]=["blitzen",0,new Image()];//the count for blitzen
	reindeerCounter["blitzen"][2].src="Images/blitzen.png";
	
	reindeerCounter["comet"]=["comet",0,new Image()];
	reindeerCounter["comet"][2].src="Images/comet.png";
	
	reindeerCounter["comet"]=["comet",0,new Image()];
	reindeerCounter["comet"][2].src="Images/comet.png";
	
	reindeerCounter["cupid"]=["cupid",0,new Image()];
	reindeerCounter["cupid"][2].src="Images/cupid.png";
	
	reindeerCounter["dancer"]=["dancer",0,new Image()];
	reindeerCounter["dancer"][2].src="Images/dancer.png";
	
	reindeerCounter["dasher"]=["dasher",0,new Image()];
	reindeerCounter["dasher"][2].src="Images/dasher.png";
	
	reindeerCounter["donner"]=["donner",0,new Image()];
	reindeerCounter["donner"][2].src="Images/donner.png";
	
	reindeerCounter["prancer"]=["prancer",0,new Image()];
	reindeerCounter["prancer"][2].src="Images/prancer.png";
	
	reindeerCounter["rudolph"]=["rudolph",0,new Image()];
	reindeerCounter["rudolph"][2].src="Images/rudolph.png";
	
	reindeerCounter["vixen"]=["vixen",0,new Image()];
	reindeerCounter["vixen"][2].src="Images/vixen.png";
	
	reindeerCounter["bumble"]=["bumble",0,new Image()];
	reindeerCounter["bumble"][2].src="Images/bumble.png";
	
	
	var user;//what the user enters
	
	for (var n=0; n<1; n++)
	{
		user=prompt("Enter:blitzen, comet, cupid, dancer, dasher, donner, \nprancer, rudolph, vixen,and type exit to see score").toLowerCase();
		
		
		 switch (user) 
		 {
            case 'done':
                // code
                break;
            case '':
                break;
            case null:
                break;
                
            case 'dasher':
                reindeerCounter["dasher"][1]+=1;
                n--;
                break;
            
            case 'dancer':
                reindeerCounter["dancer"][1]+=1;
                n--;
                break;
                
            case 'prancer':
                reindeerCounter["prancer"][1]+=1;
                n--
                break;
            case 'vixen':
                reindeerCounter["vixen"][1]+=1;
                n--;
                break;
            case 'comet':
                reindeerCounter["comet"][1]+=1;
                n--;
                break;
            case 'cupid':
                reindeerCounter["cupid"][1]+=1;
                n--;
                break;
            case 'donner':
                reindeerCounter["donner"][1]+=1;
                n--;
                break;
            case 'blitzen':
                reindeerCounter["blitzen"][1]+=1;
                n--;
                break;
            case "rudolph":
                reindeerCounter["rudolph"][1]+=1;
                n--;
                break;
            case 'exit':
                break;
            default:
                reindeerCounter["bumble"][1]+=1;
                n--;
		 }
	}
	
	
	
	
	  for(var reindeer in reindeerCounter){
        for(var element in reindeerCounter[reindeer]){
            if(!isNaN(reindeerCounter[reindeer][element])&& reindeerCounter[reindeer][element]>0){
                document.writeln(reindeerCounter[reindeer][0]+" was spotted "+reindeerCounter[reindeer][element]+" time(s).");
                for(var j=0;j<reindeerCounter[reindeer][element];j++){
                    document.write('<img src="'+reindeerCounter[reindeer][2].src+'" height="40px" width="40px">');
                }
                document.writeln("<br>");
            }
        }
    }
}

The finish product