0

在输入所有信息后，我有一个学校项目涉及酒店的账单。我希望newPage在function displayBill()javascript 下显示“折扣：20 美元”，仅当错误折扣在 html 表单上被选中为是时。当有人在表单上选择 no 选项时，javascript 函数应该说bugDiscount = 0，但是，我不希望折扣显示在新页面上（账单摘要）。我知道它会显示出来，因为当displayBill()调用该函数时，它总是显示折扣。我应该做2个不同displayBill()的，1个有折扣，1个没有？或者有更简单的方法吗？

这是html代码：

<form>
    Guest ID Number: <input type="text" id="custID" /><br />
    Room Type: 
    <select id="roomType" />
        <option></option>
        <option>Double</option>
        <option>Single</option>
        <option>Parlor</option>
    </select><br />
    Length of Stay: <input type="text" id="stayLength" name="numOranges" /><br />
    Number of Drinks: <input type="text" id="drinkNum" name="numOranges" /><br />
    Number of Towels: <input type="text" id="towelNum" name="numOranges" /><br />
    Number of Flushes: <input type="text" id="flushNum" name="numOranges" /><br />
    Bug Complaints?: <br /> <label>
        <input type="radio" name="bugComplaint" value="Yes" onclick="getCheckedRadio(this)" />Yes<br />
        <input type="radio" name="bugComplaint" value="No" onclick="getCheckedRadio(this)" />No<br />
        <br />
    Customer Comments: <br />
    <textarea name="customerComment" cols="50" rows="5">Enter your comments here...</textarea> <br />
    <br />

    <input type="button" onclick="calculateFinalBill()" value="Calculate">
</form>

这是Javascript：

const doublePrice = 150;
const singlePrice = 100;
const parlorPrice = 80;
const drinkPrice = 5;
const towelPrice = 3;
const flushPrice = 1;

var custID;
var roomPrice;
var stayLength;
var drinkNum;
var towelNum;
var flushNum;
var totalDue;
var subtotal;
var roomType;
var bugDiscount;

function calculateFinalBill() {
validateForm();
    if(roomType == "Double"){
    roomPrice = doublePrice;
    }

    if(roomType == "Single"){
    roomPrice = singlePrice;
    }

    if(roomType == "Parlor"){
    roomPrice = parlorPrice;
    }

    roomTotal = roomPrice * stayLength

    towelTotal = towelPrice * towelNum

    flushTotal = flushPrice * flushNum

    drinkTotal = drinkPrice * drinkNum

    subtotal = roomTotal + towelTotal + flushTotal + drinkTotal

    totalDue = subtotal - bugDiscount

    displayBill();
}

function getCheckedRadio(which){
var bugValue = which.value;
    if (bugValue == "No"){
    bugDiscount = 0;
    }
    if (bugValue == "Yes"){
    bugDiscount = 20;
    }
}

function validateForm(){
custID = parseInt(document.getElementById("custID").value);
if(isNaN(custID)){
    alert('Customer ID must be a number');
    return;
}
if(custID <= 0){
    alert('Customer ID must be greater than zero');
    return;
}

roomType = document.getElementById("roomType").value;
if(roomType == ""){
    alert("Room type must be selected");
    return;
}

stayLength = parseInt(document.getElementById("stayLength").value);
if(isNaN(stayLength)){
    alert('Length of Stay must be a number');
    }
if(stayLength < 0){
    alert('Length of Stay must be greater than zero');
    return;
}

drinkNum = parseInt(document.getElementById("drinkNum").value);
if(isNaN(drinkNum)){
    alert('Number of Drinks must be a number');
    }
if(drinkNum < 0 || drinkNum > 25){
    alert('Number of Drinks must be 0-25');
    return;
}

towelNum = parseInt(document.getElementById("towelNum").value);
if(isNaN(towelNum)){
    alert('Number of Towels must be a number');
    }
if(towelNum < 0){
    alert('Number of Towels must be zero or greater');
    return;
}

flushNum = parseInt(document.getElementById("flushNum").value);
if(isNaN(flushNum)){
    alert('Number of Flushes must be a number');
    }
if(flushNum < 0){
    alert('Number of Flushes must be zero or greater');
    return;
}

customerComment = document.getElementById("customerComment");
}

function displayBill(){
var newPage =  "<html><head><title>Billing Summary</title></head>"; //Add CSS after title
    newPage += "<body><h1>Happy Hoppin Hotel</h1>";
    newPage += "<h2>Guest Billing Summary</h2>";
    newPage += "Guest Identification: " + custID;
    newPage += "<br />";
    newPage += "Room Type: " + roomType;
    newPage += "<br />";
    newPage += "Length of Stay: " + stayLength;
    newPage += "<br />";
    newPage += "Room Charge: $" + roomTotal;
    newPage += "<br />";
    newPage += "Drink Charge: $" + drinkTotal;
    newPage += "<br />";
    newPage += "Towel Charge: $" + towelTotal;
    newPage += "<br />";
    newPage += "Flushing Charge: $" + flushTotal;
    newPage += "<br />";
    newPage += "Subtotal: $" + subtotal;
    newPage += "<br />";
    newPage += "Discount: $" + bugDiscount;
    newPage += "<br />";
    newPage += "Total Due: $" + totalDue;
    newPage += "<br />";

var j = window.open('','','width=400,height=500');
j.document.write(newPage);
j.document.close();
}

这是有错误折扣时新页面（账单摘要）的样子http://i.imgur.com/2ipm4LL.jpg

如果没有错误折扣，这就是它的样子http://i.imgur.com/amYl1fu.jpg

如果我的问题令人困惑，请指定我需要澄清的内容。我在思考如何在不让人困惑的情况下提出这个问题时遇到了麻烦。

4

1 回答 1

1

您的问题确实很不清楚，因为也不清楚您为什么要在 javascript 中执行所有这些操作。无论如何，您可以做的是测试 bugDiscount 值：

function displayBill(){
var newPage =  "<html><head><title>Billing Summary</title></head>"; //Add CSS after title
    newPage += "<body><h1>Happy Hoppin Hotel</h1>";
    newPage += "<h2>Guest Billing Summary</h2>";
    newPage += "Guest Identification: " + custID;
    newPage += "<br />";
    newPage += "Room Type: " + roomType;
    newPage += "<br />";
    newPage += "Length of Stay: " + stayLength;
    newPage += "<br />";
    newPage += "Room Charge: $" + roomTotal;
    newPage += "<br />";
    newPage += "Drink Charge: $" + drinkTotal;
    newPage += "<br />";
    newPage += "Towel Charge: $" + towelTotal;
    newPage += "<br />";
    newPage += "Flushing Charge: $" + flushTotal;
    newPage += "<br />";
    newPage += "Subtotal: $" + subtotal;
    newPage += "<br />";
    if(bugdiscount != 0)
    {
        newPage += "Discount: $" + bugDiscount;
        newPage += "<br />";
    }
    newPage += "Total Due: $" + totalDue;
    newPage += "<br />";

var j = window.open('','','width=400,height=500');
j.document.write(newPage);
j.document.close();
}
于 2013-04-10T16:47:02.903 回答