0

すべての情報を入力した後、ホテルの請求書を含む学校のプロジェクトがあります。newPageHTMLフォームでバグ割引が「はい」とチェックされている場合にのみ、JavaScriptでfunction displayBill()「割引：$ 20」を表示したい。誰かがフォームで no オプションを選択すると、javascript 関数は と言うはずbugDiscount = 0ですが、新しいページ (請求書の概要) に割引を表示したくありません。displayBill()関数が呼び出されると常に割引が表示されるため、表示されることがわかります。displayBill()割引ありとなしの2種類を作ったほうがいいですか？または、それを行う簡単な方法はありますか？

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 に答える