时间戳

首页 > 解决方案 > 在显示 javascript 的输出时遇到一些问题

javascript - 在显示 javascript 的输出时遇到一些问题

问题描述

谁能告诉我我的编码有什么问题以及为什么它不显示输出并且只向我显示提示？我的 if 语句有问题，我无法弄清楚它是什么我尝试了很多东西，但它现在仍然有任何建议吗？它应该与最终输出的图片相同，并且提示必须仅在我像图片提示一样写零天时显示

<!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>


<form>
<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="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;" > BOOK </button>
</form>

<p style="background-color:blue;" id="result">  </p>



<script>

var Fname= document.getElementById("fname").value;
var Lname= document.getElementById("lname").value;
var date= document.getElementById("date").value;
var days= document.getElementById("days").value;
var request= document.getElementById("request").value;
var total="";

function myFunction(){
          
var n = Number(document.getElementById("days").value);
var val= Number( document.getElementById("room").value);
var total="";


        if (n<=0){

                n=prompt(" minimum reservation period is 1 day try again");
                }
             
            
         else if (val == "King $30") {

         total = n * 30; 
         } 
         else if (val == "Double $20")  {

         total = n * 20;
         }  
         else if (val == "Single $10") {
         total = n * 10;
         } else {
         }

  
        
document.getElementById("result").innerHTML = " Dear " + Fname + Lname + " , thank you for booking with us."+
"<br>"+" Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " for " + n + "days " +
"<br>" +"Amount:=$ " + total +
"<br>" + " Any Special Request: " + request ;


};
</script>
</body>
</html>

标签： javascripthtml

解决方案

不要使用没有动作的表单

看一下这个：

function myFunction() {
  var Fname = document.getElementById("fname").value;
  var Lname = document.getElementById("lname").value;
  var date = document.getElementById("date").value;
  var days = document.getElementById("days").value;
  var request = document.getElementById("request").value;
  var val = Number(document.getElementById("room").value);
  var n = Number(document.getElementById("days").value);
  var total = "";


  if (n < 3) {
    console.log(n);
    n = alert("Minimum reservation period is 2 daye try again");
  } else if (val == "King $30") {

    total = n * 30;
  } else if (val == "Double 20") {

    total = n * 20;

  } else if (val == "Single 10") {

    total = n * 10;
  } else {

  }


  document.getElementById("result").innerHTML = " Dear " + Fname + ' ' + Lname + " , thank you for booking with us.";
  document.getElementById("result1").innerHTML = " Expected Arrival Date: " + date;
  document.getElementById("result2").innerHTML = " Booked: " + val + " for " + days + "days ";
  document.getElementById("result3").innerHTML = " Amount:=$ " + total;
  document.getElementById("result4").innerHTML = " Any Special Request: " + request;

  window.location.hash = '#result';

};
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>

<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>
<input list="room">
<datalist id="room">
    <option value="King $30">
    <option value="Double $20">
    <option value="Single $10">
  </datalist>

<br><br>

<label><b> Number of Days:</b></label>
<input type="number" 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="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>


<p style="background-color:blue;" id="result"> </p>
<p style="background-color:blue;" id="result1"> </p>
<p style="background-color:blue;" id="result2"> </p>
<p style="background-color:blue;" id="result3"> </p>
<p style="background-color:blue;" id="result4"> </p>

推荐阅读