Unhandled TypeError trying to move svg circles around in app.

[PedanticAvenger]

I keep getting the following error:

Unhandled TypeError: Argument at index 0 is invalid: Value out of bounds for native type

This happens in code where I'm modifying the cy attribute of a bunch of circles (building a blood glucose graph on a watchface).  

I've got the following snippet where I push the data value passed in the function call and stick it into the 'points' array.  Anyway, I get the above error indicated at the graphPoints[0].cy line every time  and unfortunately I'm not enough of a javascript developer to know well what to look for.  Previously in the same function I pass graphPointData to other things and they are displaying correctly so I know the data is coming in, but it keeps acting like the push never happens.

points.push(graphPointData);

graphPoints[0].cy = (250 - points[23]);
graphPoints[1].cy = (250 - points[22]);
graphPoints[2].cy = (250 - points[21]);

[JonFitbit]

I'd need to see a little bit more of the code to be sure, but can you try this before setting the values:

console.log(typeof graphPoints[0]);

How are you populating graphPoints?

[PedanticAvenger]

Graphpoints are setup in the .gui initially set off-screen (y=-10).  As this function runs it pulls the circles on-screen.  There is a set of 24 of them with a shared class name.

Here is the entire function:

function updategraph(graphPointData, trend){
let graphPoints = document.getElementsByClassName('graph-point');
console.log('updategraph')
console.log('graphPoint - ' + JSON.stringify(graphPointData))
console.log('Trend - ' + JSON.stringify(trend))
if(bgType) {
graphData.text = graphPointData;
updateBGStats(graphPointData, "mg", 0, trend)
} else {
graphData.text = mmol(graphPointData);
updateBGStats(mmol(graphPointData), "mmol", 0, trend)
}

if (graphPointData !== null) {
points.push(graphPointData);
}

graphPoints[0].cy = (250 - points[23]);
graphPoints[1].cy = (250 - points[22]);
graphPoints[2].cy = (250 - points[21]);
graphPoints[3].cy = (250 - points[20]);
graphPoints[4].cy = (250 - points[19]);
graphPoints[5].cy = (250 - points[18]);
graphPoints[6].cy = (250 - points[17]);
graphPoints[7].cy = (250 - points[16]);
graphPoints[8].cy = (250 - points[15]);
graphPoints[9].cy = (250 - points[14]);
graphPoints[10].cy = (250 - points[13]);
graphPoints[11].cy = (250 - points[12]);
graphPoints[12].cy = (250 - points[11]);
graphPoints[13].cy = (250 - points[10]);
graphPoints[14].cy = (250 - points[9]);
graphPoints[15].cy = (250 - points[8]);
graphPoints[16].cy = (250 - points[7]);
graphPoints[17].cy = (250 - points[6]);
graphPoints[18].cy = (250 - points[5]);
graphPoints[19].cy = (250 - points[4]);
graphPoints[20].cy = (250 - points[3]);
graphPoints[21].cy = (250 - points[2]);
graphPoints[22].cy = (250 - points[1]);
graphPoints[23].cy = (250 - points[0]);

if (graphPointData !== null) {
points.shift;
}
console.log(JSON.stringify(points));  //added verification view

}

[JonFitbit]

Are you using template symbols?

I've seen an issue where getElementsByClassName is slightly confused and returns an extra element.

What did typeof output?

If you can get the parent element of your graph-points, then

myParentElement.getElementsByClassName('graph-point');

[PedanticAvenger · Accepted solution]

typof was object.

In the end the issue seems to be that

points.shift != points.shift()

prior to the most recent updates that apparently worked without the brackets and now it requires them so the pedantic side of me is glad it works more correctly now? 🙂