Tumblerview Example not displaying first value

[SNK21]

Hello everyone,

I am trying to run the tumblerview  example from:

https://dev.fitbit.com/build/guides/user-interface/svg-components/views/#tumbler-view

when I do, the display shows the first value to be 'New Value', it's just taking the first value variable as the name of the variable itself? all the other values show up ok. I checked the index.gui and everything seems to be fine but obviously, something is wrong. Can someone help, please.First Value Shows as variable?index.js

import document from "document";

let tumbler = document.getElementById("tumbler");

let selectedIndex = tumbler.value;
let selectedItem = tumbler.getElementById("item" + selectedIndex);
let selectedValue = selectedItem.getElementById("content").text;

console.log(`index: ${selectedIndex} :: value: ${selectedValue}`);

selectedItem.getElementById("content").text = "New Value";

index.gui:

<svg viewport-fill="fb-cyan">
  <use id="tumbler" href="#tumblerview">
    <use id="item0" href="#tumbler-item" class="item">
      <text id="content">01</text>
    </use>
    <use id="item1" href="#tumbler-item" class="item">
      <text id="content">02</text>
    </use>
    <use id="item2" href="#tumbler-item" class="item">
      <text id="content">03</text>
    </use>
    <use id="item3" href="#tumbler-item" class="item">
      <text id="content">04</text>
    </use>
    <use id="item4" href="#tumbler-item" class="item">
      <text id="content">05</text>
    </use>
    <use id="item5" href="#tumbler-item" class="item">
      <text id="content">06</text>
    </use>
    <use id="item6" href="#tumbler-item" class="item">
      <text id="content">07</text>
    </use>
    <use id="item7" href="#tumbler-item" class="item">
      <text id="content">08</text>
    </use>
    <use id="item8" href="#tumbler-item" class="item">
      <text id="content">09</text>
    </use>
    <use id="item9" href="#tumbler-item" class="item">
      <text id="content">10</text>
    </use>
    <use id="item10" href="#tumbler-item" class="item">
      <text id="content">11</text>
    </use>
    <use id="item11" href="#tumbler-item" class="item">
      <text id="content">12</text>
    </use>
    <use id="item12" href="#tumbler-item" class="item">
      <text id="content">13</text>
    </use>
    <use id="item13" href="#tumbler-item" class="item">
      <text id="content">14</text>
    </use>
    <use id="item14" href="#tumbler-item" class="item">
      <text id="content">15</text>
    </use>
        <use id="item15" href="#tumbler-item" class="item">
      <text id="content">16</text>
    </use>
    <use id="item16" href="#tumbler-item" class="item">
      <text id="content">10</text>
    </use>
    <use id="item17" href="#tumbler-item" class="item">
      <text id="content">17</text>
    </use>
    <use id="item18" href="#tumbler-item" class="item">
      <text id="content">18</text>
    </use>
    <use id="item19" href="#tumbler-item" class="item">
      <text id="content">19</text>
    </use>
    <use id="item20" href="#tumbler-item" class="item">
      <text id="content">20</text>
    </use>
  </use>
</svg>

styles.css:

#tumbler { y: 50%-50; } 
.item { height: 90; }
.item text { font-size: 80; fill: white; x: 5; text-length: 8; }

widget.gui

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
    <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
    <!-- Additional Imports -->
    <link rel="import" href="/mnt/sysassets/widgets/baseview_widget.gui" />
    <link rel="import" href="/mnt/sysassets/widgets/tumblerview_widget.gui" />
  </defs>
</svg>

Thank you in advance.

[Durus]

This line of code is changing the text of selected item to "New Value".

selectedItem.getElementById("content").text = "New Value";

Try commenting out that line of code and see what you get.