# How to access element from JS

**URL:** <https://forums.fusetools.com/t/how-to-access-element-from-js/6416>\
**Category:** How-to Discussions\
**Created:** [July 21, 2017, 8:43am UTC](https://forums.fusetools.com/t/how-to-access-element-from-js/6416 "2017-07-21T08:43:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nadzaruddin\_Kahar](https://avatars.discourse-cdn.com/v4/letter/n/9d8465/32.png) [@Nadzaruddin\_Kahar](https://forums.fusetools.com/u/Nadzaruddin_Kahar)\
**Post date:** [July 21, 2017, 8:43am UTC](https://forums.fusetools.com/t/how-to-access-element-from-js/6416/1 "2017-07-21T08:43:32Z")

</div>

I am trying to figure out how to access ux element from the javascript so that I can access its value or whatever that I need to just like what I am used to in the HTML/JS world. The following is my code:

```auto
<Page ux:Class="Test">
    <Router ux:Dependency="router" />

    <DockPanel Padding="0,24,0,24">

        <JavaScript>
            function testValue(obj){
                console.log("Username: ", this.Username);
            }

            module.exports = {
                testValue: testValue
            }
        </JavaScript>
        
        <DockPanel Dock="Top">
            <Rectangle Dock="Left"/>
            <Rectangle Width="48" Dock="Left"/>
            <Rectangle Dock="Left">
                <TextInput Value="123" ux:Name="Username" TextColor="White"/>
            </Rectangle>
            <Rectangle Dock="Right"/>
        </DockPanel>

        <DockPanel Dock="Top">
            <Rectangle Dock="Left" />
            <Rectangle Width="48" Dock="Left"/>
            <Rectangle Dock="Left">
                <Button Text="" Clicked="{testValue}" Color="#33cc99" Width="200" Padding="8">
                    <Text Value="TEST" Color="White" TextAlignment="Center"/>
                </Button>
            </Rectangle>
            <Rectangle Width="64" Dock="Right" />
        </DockPanel>

    </DockPanel>    
</Page>

```

I keep getting Username = null from the log every time I click on the button. I think the documentation says that as long as an element is within the scope of the javascript, we should be able to see it.

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [July 21, 2017, 9:09am UTC](https://forums.fusetools.com/t/how-to-access-element-from-js/6416/2 "2017-07-21T09:09:39Z")

</div>

Yes, you can access UX elements from JavaScript by their `ux:Name`. And you can do particular things to the elements. “Reading a value of a TextInput” _is not_ one of those things.

Let me explain with an example. If you take a look at [Interface of ScrollView](https://www.fusetools.com/docs/fuse/controls/scrollview#section-table-of-contents), you’ll see that the things on the list there are marked with either `UX` or `JS`. The `JS` things are what you can do to a `ScrollView` from JavaScript, for example:

```auto
<JavaScript>
myScrollView.goto(0,100);
</JavaScript>
<ScrollView ux:Name="myScrollView" />

```

Now, if you take a look at the [Interface of TextInput](https://www.fusetools.com/docs/fuse/controls/textinput#section-table-of-contents), you’ll find that there are no methods exposed to JavaScript that would allow you to read its value.

Why is that? Because Fuse simply isn’t, and can’t be, _like what you’ve used to in HTML/JS world_. The UX code is compiled to C++ during build and it runs on a separate thread (so that animations are fast). The JS code runs in separate a VM thread, so it doesn’t block the UI when it’s doing heavy lifting on the business logic side.

To communicate between the threads, we use [Data binding](https://www.fusetools.com/docs/fuse/reactive/databinding) and [Observables](https://www.fusetools.com/docs/fusejs/observable). So your use case should translate to something like this:

```auto
<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var myText = Observable("");
		module.exports = {
			myText: myText
		};
	</JavaScript>
	<Panel Width="240" Height="56" Alignment="Center">
		<TextInput Value="{myText}" TextColor="#fff" Margin="8" />
		<Rectangle Color="#18f" CornerRadius="2" />
	</Panel>
</App>

```

You should definitely take the time and get acquainted with core concepts in Fuse, and I suggest you do so by following the [Tutorial](https://www.fusetools.com/docs/tutorial/tutorial).

---

<div class="post-metadata">

**Author:** ![Nadzaruddin\_Kahar](https://avatars.discourse-cdn.com/v4/letter/n/9d8465/32.png) [@Nadzaruddin\_Kahar](https://forums.fusetools.com/u/Nadzaruddin_Kahar)\
**Post date:** [July 21, 2017, 10:22am UTC](https://forums.fusetools.com/t/how-to-access-element-from-js/6416/3 "2017-07-21T10:22:53Z")

</div>

Hey Uldis. Thanks for the tip. Actually I went through the Tutorial but it was over 2 months ago.  
I didn’t realize the icons of the properties and events have two sides (one for ux and the other for js). Anyway, I will try to give it another ago and see what happens. Need to change the mindset slightly now.