Need help referencing a tile-list-item value

[DanMacLeod]

I want to create a tile-list-item with three <text> elements so I can format each element individually. The problem is I need to dynamically update each elements value but not sure how to reference them. I tried:

let item1= waypointsDetailsScreen.getElementById( "wpdItem1" );

wpdItem1.name but get undefined issue. Any ideas?

<use id="wpdItem1" href="#tile-list-item" class="tile-list-item" height="105"> 
          <text id="name" y="$" fill="fb-yellow">Invalid</text>
          <text id="lat"  x="25" y="$+10">Lat:</text> 
          <text id="lon"  x="25" y="$+10">Lon:</text>
          <rect id="tile-divider-bottom" class="tile-divider-bottom" />
      </use>

[tik27]

You have to get the name element itself.

ex.

document.querySelector("#wpdItem1 #name");

When executing waypointsDetailsScreen.getElementById( "wpdItem1" );

the wpsdItem1 element is what you receive.  Your text elements are children of this.