JavaScript Question: Arrays

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Locked
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

JavaScript Question: Arrays

Post by Bethrezen »

Hi all

Does any know what I’m doing wrong because I just can’t seem to get this to work and I’m not sure why and unfortunately the error message in the console is about as helpful as wet tissue paper.

Ok so first I need to write an array to hold the coordinate data, now I’m familiar with simple arrays like this

Code: Select all

var colors = ['red', 'green', 'blue'];
But what I’m trying to do here is more complicated because first I need to establish a key so that I know what icon each of the sets of coordinates pertain to but I also need to be able to target each of the icons so I can position them accordingly, so the key serve a pretty important duel purpose.

Now obviously I’ll need to figure out how to loop through the array to apply the coordinates to the icons but first things correct the syntax error because nothing else is going to work till I get this right.

Ok so here is a cut down version of the array in question

Code: Select all

var icons = 
[
  icon1: {x: -609840, y: 1879080, z: -1617000}
  icon2: {x: 3552000, y: 333000, z: 4151400}
  icon3: {x: 722400, y: -1187760, z: 1300320}
  icon4: {x: -1603560, y: 506520, z: -1195320}
  icon5: {x: -7022400, y: 435960, z: -1504440}
]; 
Now as far as I can tell this should correct however when I try running it I get the following error
SyntaxError: missing ] after element list
Which is of course total rubbish because the closing square bracket isn’t missing, so my question is what did I do wrong because I haven’t been able to find a simple and clear explanation of how to do what I’m trying to do.
pintassilgo
Posts: 200
Joined: August 30th, 2013, 3:50 pm

Re: JavaScript Question: Arrays

Post by pintassilgo »

Array [] stores just values. If you need to assign a key to each value, you probably want Object {} instead.
Commas are also missing.

Code: Select all

var icons = {
  icon1: {x: -609840, y: 1879080, z: -1617000},
  icon2: {x: 3552000, y: 333000, z: 4151400},
  icon3: {x: 722400, y: -1187760, z: 1300320},
  icon4: {x: -1603560, y: 506520, z: -1195320},
  icon5: {x: -7022400, y: 435960, z: -1504440},
};
Bethrezen
Posts: 445
Joined: September 13th, 2003, 11:56 am

Re: JavaScript Question: Arrays

Post by Bethrezen »

that did the trick thanks, knew it would probably be something stupidly simple.

Now if I can just figure out why the hover script seems to conflicting with the positioning one, would you mind taking a look see if I'm just missing something obvious again because I can't see why changing the icon src would change where the icon is positioned.

here is the hover script

Code: Select all

function hoveron(event)
{
  var target = event.target.parentNode;

  while(target.nodeName !== "TR")
  {
    var target = target.parentNode;
  }
  
  var name = target.getAttribute('data-name');

  var id = document.getElementById(name);

  id.src = id.src.replace(".png", "_1.png");
  id.style.cssText = "z-index:1;";
}

function hoveroff(event)
{
  var target = event.target.parentNode;

  while(target.nodeName !== "TR")
  {
    var target = target.parentNode;
  }

  var name = target.getAttribute('data-name');

  var id = document.getElementById(name);

  id.src = id.src.replace("_1.png", ".png");
  id.style.cssText = "z-index:0;";
}

var cells = document.querySelectorAll("td");
for (i = 0; i < cells.length; i++)
{
  cells[i].addEventListener("mouseover", hoveron);
  cells[i].addEventListener("mouseout", hoveroff);
}
and here is a cut down version of the script for positioning the icons

Code: Select all

var icons = {
  icon1: {x: -609840, y: 1879080, z: -1617000},
  icon2: {x: 3552000, y: 333000, z: 4151400},
  icon3: {x: 722400, y: -1187760, z: 1300320},
  icon4: {x: -1603560, y: 506520, z: -1195320},
  icon5: {x: -7022400, y: 435960, z: -1504440},
};

for (var key in icons)
{
  //get coordinates and convert to pixels
  var x = (((icons[key]['x'] / 500) / 100000) + 1) / 2 * 513;
  var z = (((icons[key]['z'] / 500) / 100000) + 1) / 2 * 513;

  //get icon
  var icon = document.getElementById(key);

  //position icons
  icon.style.left = x + 'px';
  icon.style.top = z + 'px';
}
Edit:

Ok never mind I figured it out it seems that

Code: Select all

id.style.cssText = "z-index:0;";
in the hover script was overriding the css set by positioning script instead of just appending the z-index value it was completely overwriting all the styles set on the icon fortunately though its a quick and simple fix just need to change the above to

Code: Select all

id.style.cssText += "z-index:0;";
to make it append rather then overwrite
Locked