NaN JS Inquiry

General
1

Good day to all. Simple inquiry. I’m making an incredibly basic tip calculator app for Android. I’m just about finished (aside from waiting for the decimal fix to come out :slight_smile: ), but something in my code bugs me. Below is my calculate function:

function calculate() {
        var result = input1.value * input2.value / 100;
        tipAmt.value = "$" + result.toFixed(2);

        if (input1.value === null || input1.value === "" || input2.value === null || input2.value === "" ) {
            tipAmt.value = "$0.00";
        }
    }

Now, when the app is first opened, and nothing is input in any field, I’d like it to simply show “$0.00”, indicating values need to be put in. I have the IF statement in that is working, but not 100%. Once opened, if this button is pressed, it will say NaN, but once cleared out and hit again, it’ll show “$0.00” as coded. I just want the initial NaN to not show up, and I’m unsure on how to do so.

Like mentioned, the IF works, just…not the first time when the app is opened. Any assistance is appreciated. :slight_smile:

2

Hi!

It is hard to tell why this isn’t working without seeing more of the code. Can you please upload a complete test case or show where calculate is called from? I suspect it is not called on startup, only after the input value has been edited.

3

Anders to the rescue as always! :slight_smile:

Below is the entire code I’ve done. I’m in the middle of changing the buttons to rectangles to add more style, so please excuse that mess.

<App Theme="Basic" Background="#eeeeeeff">

<JavaScript>

    var Observable = require("FuseJS/Observable");

    var input1 = Observable();
    var input2 = Observable();
    var tipAmt = Observable();
    var input3 = Observable();
    var divAmt = Observable();


    function calculate() {
        var result = input1.value  input2.value / 100;
        tipAmt.value = "$" + result.toFixed(2);

        if (input1.value === null || input1.value === "" || input2.value === null || input2.value === "" ) {
            tipAmt.value = "$0.00";
        }
    }

    function divide() {
        var result = input1.value  input2.value / 100;
        var result2 = result / input3.value;

        divAmt.value = result2.toFixed(2);

        if (input3.value === null || input3.value === "" ) {
            divAmt.value = "$0.00";
        }
    }

    function clear() {
        input1.value = "";
        input2.value = "";
        tipAmt.value = "";
        input3.value = "";
        divAmt.value = "";
    }

    module.exports = {
        calculate : calculate,
        input1 : input1,
        input2 : input2,
        clear : clear,
        tipAmt : tipAmt,
        input3 : input3,
        divAmt : divAmt,
        divide : divide
    }

</JavaScript>

<StackPanel ItemSpacing="6">

    <!-- Image for BG -->

    <ImageFill File="Assets/goldRiver.jpg" StretchMode="UniformToFill" />

    <!-- Check Amt Text -->

    <Text Margin="0,30,0,0" TextAlignment="Center" FontSize="30" TextColor="#5A2B5F" Value="Check Amount">
        <DropShadow Distance="0" Size="10" Spread="0.1" Color="#D0CFBD" />
    </Text>

    <!-- Check Amt Input -->

    <TextEdit Value="{input1}" InputHint="Number" Width="160" TextAlignment="Center" FontSize="34" TextColor="#333" Background="#fff" >
        <DropShadow Distance="0" Size="10" Spread="0.1" Color="#777" />
    </TextEdit>

    <!-- Tip % Text -->

    <Text TextAlignment="Center" FontSize="30" TextColor="#5A2B5F" Margin="0,20,0,0" Value="Desired Tip %" >
        <DropShadow Distance="0" Size="10" Spread="0.1" Color="#D0CFBD" />
    </Text>

    <!-- Tip % Input -->

    <TextEdit Value="{input2}" InputHint="Number" ActionStyle="Done" Width="160" TextAlignment="Center" FontSize="34" TextColor="#333" Background="#fff" >
        <DropShadow Distance="0" Size="10" Spread="0.1" Color="#777" />
    </TextEdit>

    <!-- Tip Amt Button (calculate) -->

    <Rectangle Margin="0,10,0,0" Fill="#5A2B5F" CornerRadius="10" Width="160" Height="50" Clicked="{calculate}" >
        <Text TextColor="#D0CFBD" Alignment="Center" Margin="0,0,0,1" FontSize="20">Click for Tip</Text>

        <WhilePressed>
            <Scale Factor=".8" Duration=".15" Easing="BounceOut" EasingBack="BounceIn" DurationBack=".2" />
            <GiveFocus />
        </WhilePressed>

    </Rectangle>

    <!-- Tip Amt Result -->

    <Text>
        <DropShadow Distance="0" Size="10" Spread="0.1" Color="#777" />
        <TextEdit Value="{tipAmt}" InputHint="Number" TextAlignment="Center" FontSize="80" TextColor="#00ff00" />
    </Text>

    <!-- Divide Text -->

    <StackPanel Orientation="Horizontal" Alignment="Center" ItemSpacing="10" >

        <Text TextAlignment="Center" Alignment="Center" FontSize="30" TextColor="#5A2B5F" Value="Divide Among">
            <DropShadow Distance="0" Size="10" Spread="0.1" Color="#D0CFBD" />
        </Text>

        <!-- Divide Input -->

        <TextEdit Value="{input3}" InputHint="Number" Width="60" TextAlignment="Center" FontSize="34" TextColor="#333" Background="#fff" >
            <DropShadow Distance="0" Size="10" Spread="0.1" Color="#777" />
        </TextEdit>

    </StackPanel>

    <!-- Divide Button -->

    <Button Width="160" Height="50" Text="Divide" Clicked="{divide}" >
        <WhilePressed>
            <Scale Factor=".8" Duration=".15" Easing="BounceOut" EasingBack="BounceIn" DurationBack=".2" />
        </WhilePressed>
    </Button>

    <!-- Divide Result -->

    <Text>
        <DropShadow Distance="0" Size="10" Spread="0.1" Color="#777" />
        <TextEdit Value="{divAmt}" InputHint="Number" TextAlignment="Center" FontSize="80" TextColor="#00ff00" />
    </Text>

    <!-- Clear Button -->

            <Button Width="160" Height="50" Text="Clear" Clicked="{clear}" >
        <WhilePressed>
            <Scale Factor=".8" Duration=".15" Easing="BounceOut" EasingBack="BounceIn" DurationBack=".2" />
        </WhilePressed>
    </Button>

</StackPanel>

</App>
4

I recommend giving your observable default values, and calling calculate() at startup. This should set things straight :slight_smile:

5

Much obliged. Just to be on the safe side, how would that look…? :smiley:

6

Something like

 var input1 = Observable(0);
var input2 = Observable(0);
var tipAmt = Observable(0);
var input3 = Observable(0);
var divAmt = Observable(0);

And call calculate(); right before module.exports.

7

As always, thank you kindly good sir!