# textinput display  value not updated

**URL:** <https://forums.fusetools.com/t/textinput-display-value-not-updated/5539>\
**Category:** General\
**Created:** [August 16, 2016, 11:33am UTC](https://forums.fusetools.com/t/textinput-display-value-not-updated/5539 "2016-08-16T11:33:13Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![david.grossman1234](https://avatars.discourse-cdn.com/v4/letter/d/87869e/32.png) [@david.grossman1234](https://forums.fusetools.com/u/david.grossman1234)\
**Post date:** [August 16, 2016, 11:33am UTC](https://forums.fusetools.com/t/textinput-display-value-not-updated/5539/1 "2016-08-16T11:33:13Z")

</div>

I doubt this is a bug as I’m still very new to fuse. I have a state group with three states – one for a start button, one to accept user input and one to display a response to the input. Seems like a common pattern I can use for a lot of things. To make life easy I have one variable called "guess’ that is the subject of the input. When the user selects play again I have a callback to a start method that resets guess to zero. It never resets and always just displays whatever was last entered. I then added a callback to the start of the start state to reset the value and that did not reset the value either. I have logged output to the console each time and the log shows the value being reset every time. I suspect I am doing something wrong with the callback request and I do not have the right scope for the variable. Code is attached below as well as the javascript file. Thanks in advance for any help.

```auto
<App>

    <JavaScript File="MainView.js" />
                        <!-- Subclassing TextInput -->
                        <TextInput ux:Class="MyTextInput" FontSize="20" PlaceholderColor="#ccc" Padding="5" CaretColor="Black" MaxLength="7">
                            <Rectangle Layer="Background" CornerRadius="3">
                                    <Stroke Width="1" Color="#ccc" />
                                <SolidColor Color="Yellow" />
                            </Rectangle>
                        </TextInput>

                            <StateGroup ux:Name="stateGroup">
                                <State ux:Name="startState">
                                    <Callback Handler="{start}" />
                                    <Change startPanel.Visibility="Visible"/>
                                    <Change getInput.Visibility="Hidden" />
                                    <Change responsePanel.Visibility="Hidden" />
                                </State>
                                <State ux:Name="getInputState">
                                    <Change getInput.Visibility="Visible" />
                                    <Change startPanel.Visibility="Hidden"/>
                                    <Change responsePanel.Visibility="Hidden"/>
                                </State>
                                <State ux:Name="responseState">
                                    <Change getInput.Visibility="Hidden"/>
                                    <Change startPanel.Visibility="Hidden"/>
                                    <Change responsePanel.Visibility="Visible"/>
                                </State>
                            </StateGroup>

                        <!-- Display Start Button, once clicked change state to get input -->
                             <Panel ux:Name="startPanel" Width="150" Height="150" Visibility="Visible" Alignment="Center">
                                <SolidColor ux:Name="someColor"/>
                                <Text Value="Start" Alignment="Center" FontSize="24" TextColor="Black" />
                                <Clicked>
                                    <Set stateGroup.Active="getInputState"/>
                                </Clicked>
                                <WhilePressed>
                                        <Scale Factor=".50" Duration=".10" Easing="QuadraticInOut" />
                                </WhilePressed>
                            </Panel>

                        <!-- Obtain input guess, once clicked change state to display response -->

                        <StackPanel ux:Name="getInput" Color="Yellow" Visibility="Hidden" Alignment="Center">
                                <Text Value="Guess: " FontSize="24" Color="Black" Alignment="Center"/>
                                <Rectangle Alignment="Center" Color="Red" >
                                    <MyTextInput Value="{guess}" TextColor="Blue" PlaceholderText="Enter Value Here" InputHint="Integer" />
                                </Rectangle>

                            <Rectangle Alignment="Center" Color="Green" Height="75" Width="75">
                                <Text Value="SUBMIT" Color="White" />
                                <Clicked>
                                    <Set stateGroup.Active="responseState"/>
                                </Clicked>
                                <WhilePressed>
                                    <Scale Factor=".50" Duration=".10" Easing="QuadraticInOut" />
                                </WhilePressed>
                            </Rectangle>    
                        </StackPanel>

                        <!-- Respond to the guess -->
                        <Panel ux:Name="responsePanel" Width="150" Height="150" Visibility="Hidden">
                                <SolidColor Color="Blue" />
                                <Button Text="Play Again">
                                    <Clicked>
                                        <DebugAction Message="Heading to Start" />
                                        <Callback Handler="{start}" />
                                        <Set stateGroup.Active="startState"/>
                                    </Clicked>
                                    <WhilePressed>
                                        <Scale Factor=".50" Duration=".10" Easing="QuadraticInOut" />
                                    </WhilePressed>
                                </Button>
                        </Panel>
</App>

```

```javascript
var Observable = require('FuseJS/Observable');

var guess = Observable()

function start() {
    console.log("in start")
    guess = 0
    console.log("Value of Guess ==> ", guess)

}

module.exports = {
        guess : guess,
        start : start
    }

```

---

<div class="post-metadata">

**Author:** ![Juanlu](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@Juanlu](https://forums.fusetools.com/u/Juanlu)\
**Post date:** [August 16, 2016, 11:57am UTC](https://forums.fusetools.com/t/textinput-display-value-not-updated/5539/2 "2016-08-16T11:57:08Z")

</div>

You need to use `guess.value` for get and set the value of the Observable, check this [link](https://www.fusetools.com/docs/fusejs/observable).

---

<div class="post-metadata">

**Author:** ![david.grossman1234](https://avatars.discourse-cdn.com/v4/letter/d/87869e/32.png) [@david.grossman1234](https://forums.fusetools.com/u/david.grossman1234)\
**Post date:** [August 16, 2016, 10:29pm UTC](https://forums.fusetools.com/t/textinput-display-value-not-updated/5539/3 "2016-08-16T22:29:03Z")

</div>

Very sorry for my question – I knew that. My problem is I only work on this an hour or so every day so I forget stuff like that. Thanks for your quick reply.