Невозможно просмотреть результаты функции JavaScript на странице HTML

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

Есть несколько изменений, которые я сделал, пожалуйста, проверьте это.

• () используется в качестве пост-исправления для функции не {}.{} используется для определения области действия функции.
• Я использовал кнопку с функцией onclick в HTML

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() {...}