Adding a default number to JavaScript

Question

I have a program I am working on that is supposed to be a makeshift discount calculator. I keep getting NaN when I try to make the program run without any input. I would like to add in a line of code that makes zero the default instead of Nan. I'm not sure what to do and any help would be appreciated!

"use strict";
var $ = function(id) { return document.getElementById(id); };

var calculateDiscountPercent = function(customerType, invoiceSubtotal) {
 var discountPercent = 0;
    if (customerType === "r") {
        if (invoiceSubtotal < 100) {
            discountPercent = .0;
        } else if (invoiceSubtotal >= 100 && invoiceSubtotal < 250) {
            discountPercent = .1;
        } else if (invoiceSubtotal >= 250 && invoiceSubtotal < 500) {
            discountPercent = .25;
        } else if (invoiceSubtotal >= 500) {
            discountPercent = .3;
        }
    } else if (customerType === "l") {
        discountPercent = .3;
    } else if (customerType === "h") {
        if (invoiceSubtotal < 500) {
            discountPercent = .4;
        } else if (invoiceSubtotal >= 500) {
            discountPercent = .5;
        }
    }
 return discountPercent;
};

var processEntries = function() {
    var discountAmount;
    var invoiceTotal;
    var discountPercent;

    //get values from page, reset subtotal to 2 decimals
    var customerType = $("type").value;
    var invoiceSubtotal = parseFloat( $("subtotal").value );
    $("subtotal").value = invoiceSubtotal.toFixed(2);

 //call function to get discount percent
    discountPercent = calculateDiscountPercent(customerType, invoiceSubtotal);

    //calculate and display discount percent, amount, and new total
    discountAmount = invoiceSubtotal * discountPercent;
    invoiceTotal = invoiceSubtotal - discountAmount;

    $("percent").value = (discountPercent * 100).toFixed(2) ;
    $("discount").value = discountAmount.toFixed(2);
    $("total").value = invoiceTotal.toFixed(2);

    $("type").focus;
};

window.onload = function() {
    $("calculate").onclick = processEntries;
    $("type").focus();
};

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
    background-color: white;
    width: 500px;
    margin: 0 auto;
    border: 3px solid blue;
    padding: 0 2em 1em;
}
h1 { 
    font-size: 150%;
    color: blue;
    margin-bottom: .5em;
}
label {
    float: left;
    width: 10em;
}
input, select {
    width: 12em;
    margin-left: 1em;
    margin-bottom: .5em;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Invoice Total Calculator</title>
    <link rel="stylesheet" type="text/css" href="invoice_total.css">
    <script type="text/javascript" src="invoice_total.js"></script>
</head>

<body>
    <main>
        <h1>Invoice Total Calculator</h1>
        <p>Enter the two values that follow and click "Calculate".</p>

        <label for="type">Customer Type:</label>
        <select id="type">
            <option value="r">Regular</option>
            <option value="l">Loyalty Program</option>
            <option value="h">Honored Citizen</option>
        </select>
        <br>

        <label for="subtotal">Invoice Subtotal:</label>
        <input type="text" id="subtotal" /><br>
        ----------------------------------------------------------------<br>

        <label for="percent">Discount Percent:</label>
        <input type="text" id="percent" disabled />%<br>

                <label for="discount">Discount Amount:</label>
        <input type="text" id="discount" disabled /><br>

                <label for="total">Invoice Total:</label>
        <input type="text" id="total" disabled /><br>

        <label>&nbsp;</label>
        <input type="button" id="calculate" value="Calculate" />
    </main>
</body>
</html>

There has to be a good question to point this at, so just as a comment: `var invoiceSubtotal = parseFloat( $("subtotal").value) || 0;` That works because `NaN` is *falsy*, and `||` evaluates its left-hand operand and, if it's truthy, takes that as its result; otherwise, it evaluates its right-hand operand and takes that as its result. That is, `NaN || 0` is `0`. — T.J. Crowder, Apr 22 '20 at 21:02

score 1 · Answer 1 · answered Apr 22 '20 at 21:02

1

Do this

 var invoiceSubtotal = parseFloat( $("subtotal").value ) || 0 ;

answered Apr 22 '20 at 21:02

EugenSunic

13,162
13
64
86

Surely there's a good dupetarget for this. *Edit:* [Yup](https://stackoverflow.com/questions/7540397/convert-nan-to-0-in-javascript). – T.J. Crowder Apr 22 '20 at 21:02
Where exactly would that be placed in the code? I know it shouldn't be in my case statement. – Peter Missick Apr 23 '20 at 18:23

Adding a default number to JavaScript

1 Answers1