Отображение нуля вместо NaN с использованием оператора OR - PullRequest
Новая
       5

Отображение нуля вместо NaN с использованием оператора OR

0 голосов
/ 23 апреля 2020

У меня есть программа, над которой я работаю, которая должна быть импровизированной калькулятором скидок. Я продолжаю получать NaN, когда пытаюсь заставить программу работать без какого-либо ввода. Я хотел бы добавить в строку кода, который делает ноль по умолчанию вместо Nan. Мне сказали использовать оператор OR для этого, и я не уверен, что именно я буду делать. 

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

var calculateDiscountPercent = function(customerType, invoiceSubtotal) {
	var discountPercent;
	switch( customerType ) {
        case "r":
            if (invoiceSubtotal < 100) {
                discountPercent = .1;
            } else if (invoiceSubtotal >= 100 && invoiceSubtotal < 250) {
                discountPercent = .2;
            } else if (invoiceSubtotal >= 250 && invoiceSubtotal < 500) {
                discountPercent = .25;
            } else if (invoiceSubtotal >= 500 && invoiceSubtotal < 1000) {
                discountPercent = .3;
            } else {
				discountPercent = .4;
			}
			break;
        case "l":
            discountPercent = .25;
            break;
        case "h":
			if (invoiceSubtotal < 500) {
                discountPercent = .4;
            } else if (invoiceSubtotal >= 500) {
                discountPercent = .5;
            }
            break;
        case "e":
            discountPercent = .5;
            break;
        default:
            discountPercent = 0;
    }
	/*if (customerType === "r") {
		if (invoiceSubtotal < 100) {
			discountPercent = .1;
		} else if (invoiceSubtotal >= 100 && invoiceSubtotal < 250) {
			discountPercent = .2;
		} else if (invoiceSubtotal >= 250 && invoiceSubtotal < 500) {
			discountPercent = .25;
		} else if (invoiceSubtotal >= 500 && invoiceSubtotal < 1000) {
			discountPercent = .3;
		} else {
			discountPercent = .4;
		}
    } else if (customerType === "l") {
        discountPercent = .3;
    } else if (customerType === "h") {
        if (invoiceSubtotal < 500) {
            discountPercent = .4;
        } else if (invoiceSubtotal >= 500) {
            discountPercent = .5;
        }
    }
	else if (customerType === "e") {
        discountPercent = .5;
    }
	else {
		discountPercent = 0;
	}*/
	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>
            <option value="e">Employee</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>

1 Ответ

2 голосов
/ 23 апреля 2020

Оператор ИЛИ (||) в javascript будет использовать второе значение вместо первого, если последнее равно falsy . Вы можете использовать этот оператор для установки типа значения по умолчанию, например: 

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

В этом случае, если значение равно falsy , код будет принимать ноль вместо этого.

Я применил это самое исправление к вашему коду. 

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

var calculateDiscountPercent = function(customerType, invoiceSubtotal) {
	var discountPercent;
	switch( customerType ) {
        case "r":
            if (invoiceSubtotal < 100) {
                discountPercent = .1;
            } else if (invoiceSubtotal >= 100 && invoiceSubtotal < 250) {
                discountPercent = .2;
            } else if (invoiceSubtotal >= 250 && invoiceSubtotal < 500) {
                discountPercent = .25;
            } else if (invoiceSubtotal >= 500 && invoiceSubtotal < 1000) {
                discountPercent = .3;
            } else {
				discountPercent = .4;
			}
			break;
        case "l":
            discountPercent = .25;
            break;
        case "h":
			if (invoiceSubtotal < 500) {
                discountPercent = .4;
            } else if (invoiceSubtotal >= 500) {
                discountPercent = .5;
            }
            break;
        case "e":
            discountPercent = .5;
            break;
        default:
            discountPercent = 0;
    }
	/*if (customerType === "r") {
		if (invoiceSubtotal < 100) {
			discountPercent = .1;
		} else if (invoiceSubtotal >= 100 && invoiceSubtotal < 250) {
			discountPercent = .2;
		} else if (invoiceSubtotal >= 250 && invoiceSubtotal < 500) {
			discountPercent = .25;
		} else if (invoiceSubtotal >= 500 && invoiceSubtotal < 1000) {
			discountPercent = .3;
		} else {
			discountPercent = .4;
		}
    } else if (customerType === "l") {
        discountPercent = .3;
    } else if (customerType === "h") {
        if (invoiceSubtotal < 500) {
            discountPercent = .4;
        } else if (invoiceSubtotal >= 500) {
            discountPercent = .5;
        }
    }
	else if (customerType === "e") {
        discountPercent = .5;
    }
	else {
		discountPercent = 0;
	}*/
	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 || 0 );
    $("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>
            <option value="e">Employee</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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...