无法在文本框中显示用户数据

时间:2017-03-28 00:01:32

标签: javascript html

停车场收取最低2.00美元的停车费,停车时间长达3小时。每小时额外收费0.50美元,或每小时收费超过3小时。任何给定的24小时期间的最高费用为10.00美元。假设一次停车的时间超过24小时。

网页应使用文本框计算输入小时和分钟以及退出小时和分钟。小时数将以24小时格式输入。选择提交按钮后,网页应显示费用,费用总​​数和运行总费用。请注意,在重复使用页面时,将保留后两个值。

创建并使用函数calculateTime和calculateCharge,前者计算车库中的时间量,后者计算充电量。

我运行了HTML,但是无法将值显示在文本框中。我也无法弄清楚如何计算电荷。任何帮助,将不胜感激!谢谢。

HTML CODE:

<!DOCTYPE html>
<html>
<head>
<title>Parking Charge</title>
</head>
<body><div align="center">
<form id="1"><h1><p style="background-color:black ; color:gold;">Parking Garage Charge Calculator</p></h1><hr>
<p>ENTRY TIME: <input type = "number" name = "EntryTime" id = "entTime"></p>
<p>EXIT TIME :  <input type="number" id="extTime" name="ExitTime">
<p>Number of Hours Parked: <input type ="number" name="noOfHours" id="nh"><br><br>
<input type="button" id="calculate" name="calc" value="Calculate" onclick="calculateTime()"/>
<input type="reset" id="resetBtn" value="Clear"><br><br>
<input type="number" id="total" name="totalCost" placeholder="Your Total Payment" readonly/><hr>
</form>
</div>
</body>
<script src="P2JS.js"></script>
</html>

JAVASCRIPT CODE:

function calculateTime(){

var EntryTime = document.getElementById('entTime').value;
var ExitTime = document.getElementById('extTime').value;

var noOfHours = (EntryTime - ExitTime);
document.getElementById("nh").innerHTML = noOfHours;
}

/*Function to calculate the payment on the number of hours parked*/

function calculateCharge(){
var charge = 3.50;
var payment = (noOfHours * charge);
if (noOfHours <= 3){
    totalPayment = charge * noOfHours;
    return payment;
}
else {
    payment = ((noOfHours - 3) * (charge + 0.50)) + (charge * 3);
    return payment;
}
}

1 个答案:

答案 0 :(得分:1)

小时未显示的原因是因为您正在使用输入来显示它并要求它在innerHTML中显示哪个输入没有。

所以你想要的是给它一个价值。 只需在输入html中添加'value =“”'

即可
<input type="number" name="noOfHours" value="" id="nh">

并在你的js中为'.value'更改'.innerHTML'。

document.getElementById("nh").value = noOfHours;

您可能还想更改ExitTime - EntryTime的等式,因为它现在为您提供负数小时数;)