时间戳

首页 > 解决方案 > 无法在 HTML 页面上查看 JavaScript 函数的结果

javascript - 无法在 HTML 页面上查看 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);
}
<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 函数的约束如下：

提前致谢！

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);
}

标签： javascripthtmlfunctionvalidationmath

解决方案

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

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

推荐阅读