Fatal编程技术网
  • javascript/
  • 使用innerHTML文本的Javascript表单验证赢得'；不要消失

使用innerHTML文本的Javascript表单验证赢得'；不要消失

javascript html

使用innerHTML文本的Javascript表单验证赢得'；不要消失,javascript,html,Javascript,Html,在我的html表单中，当一个字段留空并执行Javascript时，将使用innerHTML显示一条错误消息。但是，在该字段使用允许的输入后，另一个字段为空，消息不会消失。如果我刷新页面，字段中的所有信息将保留，但innerHTML消息将消失。有没有办法让错误消息在单击calculate按钮并执行Javascript后消失？就像让它重新检查，然后以某种方式把信息带走 以下是我的html代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

在我的html表单中，当一个字段留空并执行Javascript时，将使用innerHTML显示一条错误消息。但是，在该字段使用允许的输入后，另一个字段为空，消息不会消失。如果我刷新页面，字段中的所有信息将保留，但innerHTML消息将消失。有没有办法让错误消息在单击calculate按钮并执行Javascript后消失？就像让它重新检查，然后以某种方式把信息带走

以下是我的html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>The Happy Hoppin' Hotel</title>
    <link type="text/css" rel="stylesheet" href="happyhoppin_skeleton.css" />
    <script src="happyhoppin_skeleton.js" language="javascript" type="text/javascript"></script> 
  </head>
    <body>
        <form>
            <h1>The Happy Hoppin' Hotel Checkout Page</h1>
            <p>Fill out the form below to calculate balance due</p>
            Guest ID Number: <input type="text" id="custID" /><div id="guestID"> </div>
            Room Type: 
            <select id="roomType" />
                <option></option>
                <option>Double</option>
                <option>Single</option>
                <option>Parlor</option>
            </select><div id="room"> </div>
            Length of Stay: <input type="text" id="stayLength" name="" /><div id="stay"> </div>
            Number of Drinks: <input type="text" id="drinkNum" name="" /><div id="drink"> </div>
            Number of Towels: <input type="text" id="towelNum" name="" /><div id="towel"> </div>
            Number of Flushes: <input type="text" id="flushNum" name="" /><div id="flush"> </div>
            Bug Complaints?:  <label><br>
            <input type="radio" id="radio" name="bugComplaint" value="Yes" onclick="getCheckedRadio(this)" />Yes<br>
            <input type="radio" id="radio" name="bugComplaint" value="No" onclick="getCheckedRadio(this)" />No

            <div id="comments">Customer Comments: 
            <textarea name="customerComment" id="comments" onFocus="this.value=''" value="Make me disappear" cols="50" rows="5">Enter your comments here...</textarea> 
            </div>
            <input type="button" onclick="calculateFinalBill()" value="Calculate">
        </form>
    </body> 
</html>


快乐霍平酒店
快乐霍平酒店结账页面
填写下表以计算到期余额

客人身份证号码：
房间类型：
双重的
单身
客厅
逗留时间：
饮料数量：
毛巾数量：
刷新次数：
错误投诉？：

是

不
客户意见：
在这里输入您的评论。。。
以下是我的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)){
    document.getElementById('guestID').innerHTML="*Guest ID must be a number"
    throw "stop execution";
}

if(custID <= 0){
    document.getElementById('guestID').innerHTML="*Guest ID must be greater than zero"
    throw "stop execution";
}

roomType = document.getElementById("roomType").value;
if(roomType == ""){
    document.getElementById('room').innerHTML="*Room type must be selected"
    throw "stop execution";
}

stayLength = parseInt(document.getElementById("stayLength").value);
if(isNaN(stayLength)){
    document.getElementById('stay').innerHTML="*Length of Stay must be a number"
    throw "stop execution";
    }
if(stayLength < 0){
    document.getElementById('stay').innerHTML="*Length of Stay must be greater than zero"
    throw "stop execution";
}

drinkNum = parseInt(document.getElementById("drinkNum").value);
if(isNaN(drinkNum)){
    document.getElementById('drink').innerHTML="*Number of Drinks must be a number"
    throw "stop execution";
    }
if(drinkNum < 0 || drinkNum > 25){
    document.getElementById('drink').innerHTML="*Number of Drinks must be 0-25"
    throw "stop execution";
}

towelNum = parseInt(document.getElementById("towelNum").value);
if(isNaN(towelNum)){
    document.getElementById('towel').innerHTML="*Number of Towels must be a number"
    throw "stop execution";
    }
if(towelNum < 0){
    document.getElementById('towel').innerHTML="*Number of Towels must be zero or greater"
    throw "stop execution";
}

flushNum = parseInt(document.getElementById("flushNum").value);
if(isNaN(flushNum)){
    document.getElementById('flush').innerHTML="*Number of Flushes must be a number"
    throw "stop execution";
    }
if(flushNum < 0){
    document.getElementById('flush').innerHTML="*Number of Flushes must be zero or greater"
    throw "stop execution";
}

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 />";
    if(bugDiscount != 0)
    {
    newPage += "Discount: $" + bugDiscount;
    newPage += "<br />";
    }
    newPage += "Total Due: $" + totalDue;
    newPage += "<br />";
    newPage += "Come back and visit us again at the Happy Hoppin' Hotel"

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

}

constdoubleprice=150；
const singlePrice=100；
常数=80；
常量饮用水价格=5；
常数towerprice=3；
常数flushPrice=1；
var custID；
风险价值与价格；
var stayLength；
var-drinkNum；
Towernum变种；
var flushNum；
var totalDue；
var小计；
室型；
增值税折扣；
函数calculateFinalBill（）{
validateForm（）；
如果（房间类型=“双”）{
房间价格=双倍价格；
}
如果（房间类型=“单个”）{
roomPrice=单一价格；
}
如果（房间类型=“客厅”）{
房间价格=客厅价格；
}
roomTotal=roomPrice*stayLength
TowerTotal=TowerPrice*TowerNum
flushTotal=flushPrice*flushNum
drinkTotal=drinkPrice*drinkNum
小计=房间总计+毛巾总计+冲洗总计+饮用总计
totalDue=小计-折扣
显示账单（）；
}
函数getCheckedRadio（哪个）{
var bugValue=which.value；
如果（bugValue==“否”）{
折扣=0；
}
如果（bugValue==“是”）{
折扣=20；
}
}
函数validateForm（）{
custID=parseInt（document.getElementById（“custID”）.value）；
if（伊斯南（客户ID））{
document.getElementById（'guestID'）.innerHTML=“*来宾ID必须是一个数字”
抛出“停止执行”；
}
如果（客户识别码25）{
document.getElementById（'drink'）.innerHTML=“*饮料数量必须为0-25”
抛出“停止执行”；
}
towernum=parseInt（document.getElementById（“towernum”）.value）；
if（伊斯南（塔勒南））{
document.getElementById（“毛巾”）.innerHTML=“*毛巾的数量必须是一个数字”
抛出“停止执行”；
}
如果（毛巾厚度<0）{
document.getElementById（“毛巾”）.innerHTML=“*毛巾数量必须为零或更多”
抛出“停止执行”；
}
flushNum=parseInt（document.getElementById（“flushNum”）.value）；
if（isNaN（flushNum））{
document.getElementById（'flush'）.innerHTML=“*刷新数必须是一个数字”
抛出“停止执行”；
}
if（flushNum<0）{
document.getElementById（'flush'）.innerHTML=“*刷新次数必须为零或更多”
抛出“停止执行”；
}
customerComment=document.getElementById（“customerComment”）；
}
函数displayBill（）{
var newPage=“账单汇总”；//在标题后添加CSS
newPage+=“快乐霍平酒店”；
newPage+=“客人账单汇总”；
newPage+=“客户标识：”+custID；
新建页面+=“
”；
新建页面+=“房间类型：”+房间类型；
新建页面+=“
”；
新页面+=“停留时间：”+停留时间；
新建页面+=“
”；
新页面+=“房间费用：$”+房间总数；
新建页面+=“
”；
newPage+=“酒水费：$”+酒水总额；
新建页面+=“
”；
newPage+=“毛巾费：$”+毛巾总额；
新建页面+=“
”；
新页面+=“冲洗费：$”+冲洗总额；
新建页面+=“
”；
newPage+=“小计：$”+小计；
新建页面+=“
”；
如果（折扣！=0）
{
newPage+=“折扣：$”+折扣；
新建页面+=“
”；
}
newPage+=“到期总额：$”+到期总额；
新建页面+=“
”；
newPage+=“再次光临快乐霍平酒店”
var j=窗户开启（“”，，“宽度=400，高度=500”）；
j、 文件。编写（新页）；
j、 document.close（）；
}
这可能有助于视觉效果 如果单击“计算”，在Guest ID中输入一个值，然后再次单击“计算”，您将看到“Guest ID必须是数字”消息不会消失

如果我的问题令人困惑或需要任何其他信息，请在拒绝我的问题之前提问。谢谢。

只需在验证开始时重置错误消息即可解决此问题：

document.getElementById('guestID').innerHTML='';
document.getElementById('room').innerHTML='';
document.getElementById('stay').innerHTML='';
document.getElementById('drink').innerHTML='';
/// and so on.
然而，最好是以一种更干净利落的方式来处理这个问题（不要重复自己），或者创建用于设置每个错误消息的通用方法，或者至少存储每个错误输出元素的var引用，即
var gID=document.getElementById（'guestID'）
这意味着您可以在需要的任何地方轻松编写
gID.innerHTML
，并且可以节省重新搜索DOM的时间。

谢谢！那太简单了。我不知道为什么我没有想到它。