# 4 Images - 4 Text Boxes

**URL:** <https://forum.kirupa.com/t/4-images-4-text-boxes/644403>\
**Category:** web dev\
**Created:** [October 1, 2020, 1:29am UTC](https://forum.kirupa.com/t/4-images-4-text-boxes/644403 "2020-10-01T01:29:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [October 1, 2020, 1:29am UTC](https://forum.kirupa.com/t/4-images-4-text-boxes/644403/1 "2020-10-01T01:29:33Z")

</div>

So I tried my hand at writing a constructor function that places 4 images (the images are stand ins for rodents since said rodents can’t be found in the imageGetImage library) on the page with the following caption above the images - You know a (Rodent.type)(Rodent.dangerous) a pest. But all the images are placed at all 4 locations, What am I doing wrong?  
I thought that my code had unique X,Y locators for each image so how the heck did all 4 images get placed in each of the 4 locations?

* * *

```javascript
var Rodents = function(x,y,type,dangerous)	{
	this.x = x;
	this.y = y;
	this.type = type;
	this.dangerous = dangerous;
};
var firstRodent = new Rodents(300,200,"rat","is");
var secondRodent = new Rodents(10,200,"beaver","is not");
var thirdRodent = new Rodents(10,30,"mouse","is");
var fourthRodent = new Rodents(300,30,"chipmunk","is not");
var drawRodents = function(Rodents){
	var Chipmunk = getImage("avatars/duskpin-seedling");
	var Mouse = getImage("avatars/aqualine-sapling");
	var Beaver = getImage("avatars/leaf-blue");
	var Rat = getImage("avatars/leaf-red");
	textSize(20);
	fill(10,200,10);
	var txt = ("You know a " + Rodents.type + " " + Rodents.dangerous + " a pest");
	text(txt,Rodents.x,Rodents.y - 10);
	image(Chipmunk,Rodents.x,Rodents.y);
	image(Mouse,Rodents.x,Rodents.y);
	image(Beaver,Rodents.x,Rodents.y);
	image(Rat,Rodents.x,Rodents.y);
};
drawRodents(firstRodent);
drawRodents(secondRodent);
drawRodents(thirdRodent);
drawRodents(fourthRodent);

```

* * *

this is the final graphic result and although I can’t be sure, I think all 4 images are superimposed on one another

 ![Screen Shot 2020-09-30 at 6.23.32 PM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/b/bc0f2e430686e9dcb1ed1f25ffa583d2e92c2299.png)

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 1, 2020, 11:08am UTC](https://forum.kirupa.com/t/4-images-4-text-boxes/644403/2 "2020-10-01T11:08:10Z")

</div>

> [@John\_Stern](#):
>
> so how the heck did all 4 images get placed in each of the 4 locations?

Because you’re drawing all 4 images 😆 :

```javascript
	image(Chipmunk,Rodents.x,Rodents.y);
	image(Mouse,Rodents.x,Rodents.y);
	image(Beaver,Rodents.x,Rodents.y);
	image(Rat,Rodents.x,Rodents.y);

```

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [October 1, 2020, 4:17pm UTC](https://forum.kirupa.com/t/4-images-4-text-boxes/644403/3 "2020-10-01T16:17:48Z")

</div>

OK so I rewrote the code with some new variables that I thought were better named to reflect what I was trying to do and the end result was to be 4 images as before with the appropriate captions - but - sigh - nothing prints out - so I wonder what it is this time?

```javascript
var Rodents = function(x,y,type,isisnot,image)	{
	this.x = x;
	this.y = y;
	this.type = type;
	this.isisnot = isisnot;
	this.image = image;
};
var Mouse = new Rodents(10,30,""mouse","is",getImage("avatars/aqualine-sapling"));
var Chipmunk = new Rodents(300,30,"chipmunk","is not",getImage("avatars/aqualine-sapling"));
var Beaver = new Rodents(10,200,"beaver","is not",getImage("avatars/leaf-blue"));
var Rat = new Rodents(300,200,"rat","is",getImage("avatars/leaf-red"));
var drawRodents = function(Rodents)	(
	textSize(20);
	fill(10,200,10);
	var txt = ("You know a " + Rodents.type + " " + Rodents.isisnot + " a pest.");
	text(txt,Rodents.x,Rodents.y - 10);
	image(Rodents.image,Rodents.x,Rodents.y);
);
drawRodents(Mouse);
drawRodents(Chipmunk);
drawRodents(Beaver);
drawRodents(Rat);

```

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 1, 2020, 4:26pm UTC](https://forum.kirupa.com/t/4-images-4-text-boxes/644403/4 "2020-10-01T16:26:59Z")

</div>

Looks like you have a double-double quote for mouse. I added code formatting to your post (I’ve been doing it with most of your posts) so you can see the error there more clearly as the string coloring gets swapped where the two quote characters are.

---

<div class="post-metadata">

**Author:** ![John\_Stern](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/john_stern/32/12050_2.png) [@John\_Stern](https://forum.kirupa.com/u/John_Stern)\
**Post date:** [October 1, 2020, 6:01pm UTC](https://forum.kirupa.com/t/4-images-4-text-boxes/644403/5 "2020-10-01T18:01:25Z")

</div>

Yikes! Right you are! So I eliminated the double quote - still the darn thing would not print - then I realized the drawRodents function had ( )'s instead of the required { }'s - once the correction was made the graphic printed out as wanted - so there’s hope for me yet