无法在 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

不是

function calculate{} {...}

应该是

function calculate() {...}

Answer 2

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

• () 用作后修复功能，而不是 {}。 {} 用于定义功能范围。
• 我在 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 " -->