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.

[tik27]

What are you trying to do, because looking at the code you have it seems that you are replaceing the text of the first tumbler and replacing its text with "New Value"

So from what i can tell, the code is working perfectly.

//Get the Tumbler Element
let tumbler = document.getElementById("tumbler");

//Get the currently selected Tumbler index value 
let selectedIndex = tumbler.value;

//Get the Element and Text of currently selected value
let selectedItem = tumbler.getElementById("item" + selectedIndex);
let selectedValue = selectedItem.getElementById("content").text;
//Log the current values
console.log(`index: ${selectedIndex} :: value: ${selectedValue}`);
//Overwrite the current of selected element w/"New Value"
selectedItem.getElementById("content").text = "New Value";