无法在HTML页面上查看JavaScript函数的结果

Question

function calculate() { //Edit use () not {}
//Edit, use getElementById to get elements and validate return
let hour = document.getElementById("hour")
,minute = document.getElementById("minute");
if ( hour != undefined && hour.value != undefined ) {
hour = Number(hour.value);
}
if ( minute != undefined && minute.value != undefined ) {
minute = Number(minute.value);
}
alert("hour: " + hour + ", minute: " + minute);
let actualHour = Math.ceil(parseFloat(hour + "." + minute))
,additionalCharge = 0.75, minimumCharge = 3.00
,maximumCharge = 12.00, totalCost = 0.0;
alert("actualHour: " + actualHour);
if( actualHour >= 24 ){
totalCost = 12.00;
} else if ( actualHour <=2 ){
totalCost = 3.00;
}
if ( actualHour > 2 && actualHour < 24 ) {
let countedHourForAdditionalCharge = actualHour - 2;
totalCost = 3.00 + countedHourForAdditionalCharge * 0.75;
if ( totalCost > 12.00 ) {
totalCost = 12.00;
}
}
alert("total charge: " + totalCost);
}

<b>Hours:</b><input type="text" name="hour" id="hour"/>
<b>Minutes:</b><input type="text" name="minute" id="minute"/>
<button type= "button" onclick="calculate()" value="Submit">Submit</button>

我正在编写一个程序，根据用户输入的小时和分钟显示停车费。我有一个HTML代码和一个JavaScript代码，但单击HTML页面上的"计算"按钮后，什么都不会发生。我不知道如何显示结果。我想要一些关于哪种方法最容易让函数工作并显示结果的建议。

JavaScript函数的约束如下：

• 车库停车两小时的最低收费为3.00美元。

• 车库停车两小时的最低收费为3.00美元。

• 车库每小时或超过两小时的部分额外收费0.75美元。

• 任何24小时内的最高收费为12.00美元。

• 小时向上取整到最接近的整数。(如果有人停车4小时35分钟，则四舍五入为5小时(

提前感谢！

HTML:

<form name="myForm" action="/Users/wilson/Desktop/form.html" onsubmit="event.calculate(); method"POST">
<b>Hours:</b><input type="text" name="hour" id="hour"/>
<b>Minutes:</b><input type="text" name="minute" id="minute"/>
<button type= "button" onclick="calculate()" value="Submit">Submit</button>
</p>

JavaScript:

function calculate() { //Edit use () not {}
//Edit, use getElementById to get elements and validate return
let hour = document.getElementById("hour")
,minute = document.getElementById("minute");
if ( hour != undefined && hour.value != undefined ) {
hour = Number(hour.value);
}
if ( minute != undefined && minute.value != undefined ) {
minute = Number(minute.value);
}
alert("hour: " + hour + ", minute: " + minute);
let actualHour = Math.ceil(parseFloat(hour + "." + minute))
,additionalCharge = 0.75, minimumCharge = 3.00
,maximumCharge = 12.00, totalCost = 0.0;
alert("actualHour: " + actualHour);
if( actualHour >= 24 ){
totalCost = 12.00;
} else if ( actualHour <=2 ){
totalCost = 3.00;
}
if ( actualHour > 2 && actualHour < 24 ) {
let countedHourForAdditionalCharge = actualHour - 2;
totalCost = 3.00 + countedHourForAdditionalCharge * 0.75;
if ( totalCost > 12.00 ) {
totalCost = 12.00;
}
}
alert("total charge: " + totalCost);
}

Answer 1

我做了一些更改，请检查一下。

• ()被用作函数的后修复，而不是{}。{}用于定义功能范围
• 我在HTML中使用了带有onclick功能的按钮

function calculate() {
var hour = document.getElementById("hour").value;
var minute = document.getElementById("minute").value;

//Updated
if(hour === "" && minute === ""){
alert("Please provide valid inputs");
return false;
}
//    alert("hour "+hour)
//    alert("minute "+minute)

let minimumCharge = 3.00;
let additionalCharge = 0.75;
let maximumCharge = 12.00;
let actualHour = Math.ceil(parseFloat(hour+"."+minute));
alert("actualHour: "+actualHour);
let totalCost = 0.0;
if(actualHour >=24){
totalCost = 12.00;
}
if(actualHour <=2){
totalCost = 3.00;
}
if(actualHour >2 && actualHour <24){
let countedHourForAdditionalCharge = actualHour - 2;
totalCost = 3.00 + countedHourForAdditionalCharge * 0.75;
if(totalCost > 12.00){
totalCost = 12.00;
}
}
alert("total charge: " +totalCost);
}

<b>Hours:</b><input type="text" name="hour" id="hour">
<b>Minutes:</b><input type="text" name="minute" id="minute">
<button type= "button" onclick="calculate()" value= "Submit">Submit</button>
<!-- >>>>>>>>>>>>>>>^ you were missing " -->

Answer 2

不是

function calculate{} {...}

应该是

function calculate() {...}