TypeError: Cannot read property 'add' of undefined

General
1

I am trying to create a simple app that lets you create a market list

this is my code for the UI

<App Theme="Basic">
    <JavaScript File="JS/app.js"/>
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <DockPanel>
            <Panel>
                <LinearNavigation ux:Name="_appNav" Easing="CircularInOut" Duration="0.5" />
                <Page ux:Class="AppPage">
                    <EnteringAnimation>
                        <Move X="-1" Duration="-0.5" />
                    </EnteringAnimation>
                    <ExitingAnimation>
                        <Move X="1" Duration="0.5" />
                    </ExitingAnimation>
                </Page>
                <Rectangle ux:Class="Save" Fill="#D7440D" CornerRadius="0" />


                <AppPage>
                    <StackPanel Alignment="Top" Background="#7B8395">
                        <Text Value="JustSaying" TextColor="#F6ED46" FontSize="40" Alignment="Center" />
                    </StackPanel>

                    <StackPanel Alignment="TopCenter" Margin="10,100,0,0">
                        <Each Items="{note_content}">
                            <Text Value="{list}" />
                        </Each>
                        <!-- <Text Value="{note_content}" /> -->
                    </StackPanel>

                    <StackPanel Alignment="Bottom">
                        <Grid ColumnCount="2" Background="#E6E6E6" Alignment="Bottom">
                            <TextInput Margin="0,10,-90,0" PlaceholderColor="#9C9C9C" PlaceholderText="Enter text here" Opacity="1" Background="#E6E6E6" Value="{note_entered}"/>
                            <Save Margin="100,0,0,0" Clicked="{send}">
                                <Text Value="Save" Alignment="Center"/>
                            </Save>
                            <WhileKeyboardVisible>
                                    <Move Y="-1" RelativeTo="Keyboard" />
                            </WhileKeyboardVisible>
                        </Grid>
                    </StackPanel>
                </AppPage>
            </Panel>
        </DockPanel>
    </DockPanel>
</App>

This is my JS

// all variables are declered here
var Observable = require("FuseJS/Observable");
var def_value = Observable({list: "Market list is empty"});
var note_entered = Observable();


function yap(){
    // body...
    if (note_entered.value){
        def_value.value = "";
        def_value = def_value.add({list: note_entered.value});
        note_entered.value = "";
        return def_value;
    }
    else{
        def_value.value = "";
        def_value = def_value.add({list: "You cant post empty values"});
        return def_value;
    }
};

module.exports = {
    note_content : def_value,
    note_entered: note_entered,
    send : yap,
};

I realise that when I enter a text for the first time, it add shows up on my view,

But when I add another value and click the send button it says this as the error


ERROR: 
    Name: TypeError: Cannot set property 'value' of undefined
    Error message: Uncaught TypeError: Cannot set property 'value' of undefined
    File name: /Users/chizom/Documents/AndroidProject/JustSaying/JS/app.js
    Line number: 14
    Source line:         def_value.value = "";
    JS stack trace: TypeError: Cannot set property 'value' of undefined
        at yap (/Users/chizom/Documents/AndroidProject/JustSaying/JS/app.js:14:19)

what do you think I am doing wrong or not implementing

2

You have an error in line 14 of app.js…

What does the code around line 14 look like?

3

file
Ic2RlLnyFfAa-legacy-files-tPQYoSeEKtV55QiX-ezT37qBaxYtuem7wXpojA3wM.png787×536

4

Why are you assigning def_value to the result of def_value.add in line 15 and 21?

def_value = def_value.add({list: note_entered.value});

Try just

def_value.add({list: note_entered.value});
5

it worked perfectly I am all smile. Thanks to you and all the TEAM FUSE. I LOVE YOU ALL

6

Glad we could help!

Side note, any reason why you’re returning the def_value Observable from yap?

7

Also you shouldn’t need to set def_value's value to ""; you should be fine with just:

function yap() {
  if (note_entered.value){
    def_value.add({list: note_entered.value});
    note_entered.value = "";
  }
  else{
    def_value.add({list: "You cant post empty values"});
  }
}

Note the semicolon after the function definition is also not needed :slight_smile:

8

Glad it worked :smiley: