JavaScript: Accessing ArrayElement by index of other Array Element? array[array[0]] returns undefined

Question

I am trying to make function which accepts 7 digit code (at minimum) and then loads images/elements of character thus creating a character from code.

I wrote this code:

<script type="text/javascript">
var skins = [];
skins["w"] = "http://example.com/char_elements/base.png";

var eyes = [];
eyes["b"] = "http://example.com/char_elements/eyes/blue.png";
eyes["g"] = "http://example.com/char_elements/eyes/green.png";
eyes["r"] = "http://example.com/char_elements/eyes/red.png";

var hair = [];
hair["b"] = "http://example.com/char_elements/hair/black.png";
hair["w"] = "http://example.com/char_elements/hair/blond.png";
hair["s"] = "http://example.com/char_elements/hair/brown.png";

var mouth = [];
mouth["h"] = "http://example.com/char_elements/mouth/happy.png";

var pants = [];
pants["s"] = "http://example.com/char_elements/pants/shorts.png";

var shoes = [];
shoes["b"] = "http://example.com/char_elements/shoes/black.png";

var torso = [];
torso["s"] = "http://example.com/char_elements/torso/shirt.png"

function LoadChar(code){
var data = code.split(/(?=[a-z])/i);
var skins = [skins[data[0]], eyes[data[1]], hair[data[2]], mouth[data[3]], pants[data[4]], shoes[data[5]], torso[data[6]]];

document.getElementById("out").innerHTML = skins.toString();
}
</script>
<div id="out"></div>

However, when I call LoadChar("wgbhsbs");

It thorws me "Cannot read property 'w' of undefined"

I am still new to Arrays in JS, so I am sure I am making some simple Syntax error or doing something a bit wrong.

So what this does is:

1) Accepts code and splits it into 7 elements (always 7, nothing else) stores it in "data" variable as array. 2) Builds "skins" array by loading: skin[number from code] and same for other elements. 3) For testing purposes I am trying to output skins array, but it stops at step 2.

Is there any explanation to this?

Your real issue is that you define skins twice, once outside the function, and then a local variable inside the function with the same name, that doesn't have a w property — adeneo
– adeneo, Commented Feb 20, 2015 at 18:25

LcSalazar · Accepted Answer · 2015-02-20 18:25:06Z

5

You are recreating the previously defined skins variable.

Use a different name for the variable inside the function, and you'll be fine.

var skins = [];
skins["w"] = "http://example.com/char_elements/base.png";

var eyes = [];
eyes["b"] = "http://example.com/char_elements/eyes/blue.png";
eyes["g"] = "http://example.com/char_elements/eyes/green.png";
eyes["r"] = "http://example.com/char_elements/eyes/red.png";

var hair = [];
hair["b"] = "http://example.com/char_elements/hair/black.png";
hair["w"] = "http://example.com/char_elements/hair/blond.png";
hair["s"] = "http://example.com/char_elements/hair/brown.png";

var mouth = [];
mouth["h"] = "http://example.com/char_elements/mouth/happy.png";

var pants = [];
pants["s"] = "http://example.com/char_elements/pants/shorts.png";

var shoes = [];
shoes["b"] = "http://example.com/char_elements/shoes/black.png";

var torso = [];
torso["s"] = "http://example.com/char_elements/torso/shirt.png"

function LoadChar(code){
  var data = code.split(/(?=[a-z])/i);
  var other_variable = [skins[data[0]], eyes[data[1]], hair[data[2]], mouth[data[3]],   pants[data[4]], shoes[data[5]], torso[data[6]]];

  alert(other_variable.toString());
}
LoadChar("wgbhsbs");

answered Feb 20, 2015 at 18:25

LcSalazar

16.9k3 gold badges40 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

arleitiss Over a year ago

Well, that solved all the problems. I knew it's something small, I need to be a bit more careful with namings. Didn't even notice naming two variables same names. Thank you.

arleitiss Over a year ago

Also do I need to change all array elements to {} as mentioned in other answers?

LcSalazar Over a year ago

@arleitiss - You don't need to... but you should

Jonathan · Accepted Answer · 2015-02-20 18:29:47Z

1

You're defining properties of an object. Not an array.

Change

var skins = [];
skins["w"] = "http://example.com/char_elements/base.png";

to

var skins = {};
skins.w = "http://example.com/char_elements/base.png";

Also you're redefining skins inside your LoadChar function as LcSalazar pointed out.

Fiddle

edited Feb 20, 2015 at 18:29

answered Feb 20, 2015 at 18:22

Jonathan

9,1924 gold badges47 silver badges82 bronze badges

5 Comments

Matt Burland Over a year ago

Although more appropriate, it won't make any difference. Arrays are object and can have properties indexed by strings just like any other object.

arleitiss Over a year ago

So do I access skins/eyes/hair elements like skins.data[0] is that right?

Matt Burland Over a year ago

@arleitiss: No, you'd still access as skins["w"]

Jonathan Over a year ago

@arleitiss check the Fiddle

arleitiss Over a year ago

@Jonathan Checked, modified my code now. Thanks for contributing to solution.

Collectives™ on Stack Overflow

JavaScript: Accessing ArrayElement by index of other Array Element? array[array[0]] returns undefined

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related