Tilelist onClick telling me can't set to null

[Jshevitz]

i'm pretty new to the fitbit SDK but haven't had a terrible time figuring it out thanks to my college course works so far. i'm trying to get the onClick to work to test out that my tilelist event is working when touched, but the list is telling me the onclick is being set to null. this makes me think that something is not being set properly, but i haven't been able to figure it out yet and i figured i would seek help before getting super frustrated. here's my code:

//index.gui (i cut off this section as it is quite long, here is the first few items for the sake of seeing the repeated pattern. list renders fine and scrolls and everything)

<defs>
<symbol id="my-tile-item" href="#tile-list-item" focusable="false" pointer-events="visible" system-events="all">
<rect id="touch-me" pointer-events="all" x="0" y="0" width="100%" height="100%-2" opacity="0" />
</symbol>
</defs>
<use href="#tile-list" id="statsList">
<var id="align-mode" value="1" />
<use href="#tile-list-header" class="tile-list-item" id="headTile">
<text>Stats</text>
<line x1="0" y1="48" x2="300%" y2="48" fill="white" stroke-width="1" />
</use>
<use href="#my-tile-item" class="tile-list-item">
<image href="heart.png" pointer-events="visible" fill="black" id="statPic"/>
<text id="hrm" x="35" class="large-value"></text>
<line x1="0" y1="48" x2="300%" y2="48" fill="white" stroke-width="1" />
</use>

//index.js (this is only the section pertaining to the function for clicking on a tilelist item, the console log for currentIndex is just to see if the index was being read. i have a separate console log that shows the clicked inside the function)

let list = document.getElementById("statsList");
let items = list.getElementsByClassName("tile-list-item");

console.log(currentIndex);

items.forEach((element, index) => {
let touch = element.getElementById("touch-me");
touch.onclick = (evt) => {
console.log(`touched: ${index}`);
}
});

i appreciate the help!

[morningReign]

Hello Jshevitz,

I think you're setting the click events to an instance of a function that includes an index variable that won't exist when the function is run.

You may want to try using 'this' but you'll need the more verbose function declaration to have access to it.

for (let x=0;x<3;x++){
  document.getElementById('mPage').getElementsByTagName((["text","line","image"])[x]).forEach(function(element){
    element.onmouseup = function (element) {console.log(this.id) }
  }
}

Also, you may want to try onmouseup.

Also,... pointer-events='visible' 

Regards,