MozillaZine


JavaScript Question: Arrays

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

Post Posted May 9th, 2022, 6:17 am

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: 199
Joined: August 30th, 2013, 3:50 pm

Post Posted May 9th, 2022, 8:34 pm

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: 421
Joined: September 13th, 2003, 11:56 am

Post Posted May 12th, 2022, 1:30 pm

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

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest