Array of Objects

[lhugg22]

I have run into an issue and am wondering if anyone can help me out.

I have made a list of 50 line objects 

<line id="min1" y1="0" y2="15%" fill="white" stroke-width="1"/>
<line id="min2" y1="0" y2="15%" fill="white" stroke-width="1"/>

....

(also if there is a better way to do this I am all ears)

then I was turned them into an array (in index.js) called minUnit

let minUnit = [
document.getElementById("min1"),
document.getElementById("min2"),

...

I am able to set x1 and x2 using a for loop but if I add another if statement inside the loop - things break... Despite there being no compiler/build errors sometimes it wouldn't load to the watch. other times I wouldn't get any lines.

for(let i = 1; i<50; i++){
minUnit[i].x1 = i*7;
minUnit[i].x2 = minUnit[i].x1;
//minUnit[i].fill="blue";
/*
if(i%2 == 0){
minUnit[i].fill = "blue";
}
else {
minUnit[i].fill = "white";
}
*/
}

(currently I have the if statement commented out so that the lines show up, but if I take out the comments things break).

I tried removing the field that I am setting (ie fill in this if statement) from the index.gui and that didn't help.

This for loop is inside the function updateClock() from the standard clockface app... if there is a better way of doing this I am open to suggestions.

Thanks,

[JonFitbit · Accepted solution]

I would try something like:

<line class="line" />

.line {
  stroke-width: 1;
  fill: white;
  y1: 0;
  y2: 15%;
}

let lines = document.getElementsByClassName("line");
lines.forEach(function(line, index) {
  let position = index * 7;
  line.x1 = position;
  line.x2 = position;
  if (i % 2 === 0){
    line.style.fill = "blue";
  } else {
    line.style.fill = "white";
  }
});

[lhugg22]

That has helped me get a couple steps in the right direction.

I think the biggest problem was assigning style properties (width, fill, y1, y2) in multiple areas.

Thanks,