JavaScript酒店预订表单输出异常排查求助：仅弹出提示框无输出，IF语句逻辑问题待解决

Hey there, let's work through the problems in your code so your booking form works as expected! Here are the key issues and how to fix them:

Key Problems in Your Code #

• Variables loaded too early: You grabbed input values right when the page loads (before the user enters anything). These variables stay empty forever, so your confirmation message never shows the user's actual input.
• Incorrect room type check: You're comparing the room's numeric value (like 30 for King) to full strings like "King $30"—these will never match, so your total price is always blank.
• Form submits by default: Your BOOK button is a submit button, so clicking it refreshes the page immediately, wiping out your result before anyone can see it.
• Prompt input not updated: When you ask for a valid number of days, you don't save that new value to use in your calculation.

Fixed Full Code #

<!DOCTYPE html>
<html>
<head>
<style>
body{ background-color:orange; margin:20px; }
</style>
<title> Assignment2</title>
</head>
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<!-- Prevent default form submission -->
<form onsubmit="return false;">
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20" >
<input type="text" id="lname" size="20" >
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label ><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option value="30">King $30</option>
<option value="20">Double $20</option>
<option value="10">Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;" > CLEAR </button>
<button type="button" onClick="myFunction()" STYLE="background-color:red;border:offset;" > BOOK </button>
</form>
<p style="background-color:blue;color:white;" id="result"> </p>
<script>
function myFunction(){
    // Grab input values INSIDE the function to get the latest user input
    var Fname= document.getElementById("fname").value;
    var Lname= document.getElementById("lname").value;
    var date= document.getElementById("date").value;
    var request= document.getElementById("request").value;
    
    var n = Number(document.getElementById("days").value);
    var val= Number(document.getElementById("room").value);
    var total=0; // Initialize total to avoid blank values

    // Handle invalid days input with a loop to ensure valid entry
    if (isNaN(n) || n <=0){
        do {
            n = Number(prompt("Minimum reservation period is 1 day. Please try again:"));
        } while(isNaN(n) || n <=0);
        // Update the input field with the valid value
        document.getElementById("days").value = n;
    }

    // Calculate total using the numeric room value
    if (val === 30) {
        total = n * 30;
    } else if (val === 20) {
        total = n * 20;
    } else if (val === 10) {
        total = n * 10;
    }

    // Get the room's display text for the confirmation message
    var roomText = document.getElementById("room").options[document.getElementById("room").selectedIndex].text;

    // Build and display the confirmation
    document.getElementById("result").innerHTML = 
        "Dear " + Fname + " " + Lname + ", thank you for booking with us.<br>" +
        "Expected Arrival Date: " + date + "<br>" +
        "Booked: " + roomText + " for " + n + " days<br>" +
        "Amount: $ " + total + "<br>" +
        "Any Special Request: " + request ;
};
</script>
</body>
</html>

What Changed & Why #

1. Moved variable fetching inside myFunction(): Now we capture the user's input when they click BOOK, not when the page first loads.
2. Fixed room type calculation: We compare the numeric value of the room directly, and grab the room's display text to show in the confirmation.
3. Stopped page refresh: Changed the BOOK button to type="button" and added onsubmit="return false;" to the form, so the result stays visible.
4. Improved invalid days handling: Added a loop to ensure the user enters a valid number, and updated the input field with their valid entry.
5. Initialized total to 0: Avoids blank price values in the confirmation message.

Now your form will:

• Show a prompt only when days are 0 or invalid
• Display a full confirmation with all user details and correct total price
• Keep the result visible without refreshing the page

内容的提问来源于stack exchange，提问作者Bushra Mh