TypeError: Cannot read property 'add' of undefined

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"/>
        <StatusBarBackground Dock="Top" />
                <LinearNavigation ux:Name="_appNav" Easing="CircularInOut" Duration="0.5" />
                <Page ux:Class="AppPage">
                        <Move X="-1" Duration="-0.5" />
                        <Move X="1" Duration="0.5" />
                <Rectangle ux:Class="Save" Fill="#D7440D" CornerRadius="0" />

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

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

                    <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"/>
                                    <Move Y="-1" RelativeTo="Keyboard" />

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;
        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

    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

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

What does the code around line 14 look like?

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});

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

Glad we could help!

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

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 = "";
    def_value.add({list: "You cant post empty values"});

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

Glad it worked :smiley: