Question

我是编程新手，无法弄清楚如何正确使用代码中的全局变量。当我调用某些函数时，我正在尝试使用全局变量作为我的参数。我能做些什么来完成这项工作？任何建议或建议将不胜感激，谢谢。

<!DOCTYPE HTML>
<html lang="en-us">
    <head>
        <meta charset="utf-8">
        <title>Loan Calculator</title>
        <script type="text/javascript">

            /* Input: Get the principal, intrest rate, years, payments per year and number of payments to date
             * Processing:  Calculating the monthly payment of a loan and loan payoff amount
             * Output: The monthly payment and payoff amount
             */

            var inv = document.getElementById("invest").value;
            var r = document.getElementById("rate").value;
            var num = document.getElementById("numyear").value;
            var per = document.getElementById("periods").value;
            var pay = document.getElementById("pay").value;
            var invest = parseFloat(inv);
            var rate = parseFloat(r);
            var numyear = parseFloat(num);
            var periods = parseFloat(per);
            var paytodate = parseFloat(pay);

            function doPayment() {
                var result = computePayment(invest, rate, numyear, periods);
                document.getElementById("output").innerHTML = result;

            }

            function doBalance() {
                var result = computeBalance(invest, rate, numyear, periods, paytodate);
                document.getElementById("secondOut").innerHTML = result;
            }

            function computePayment(principal, annualRate, years, periodsPerYear) {
                var p = (principal * annualRate / periodsPerYear) / (1 - Math.pow((1 + annualRate / periodsPerYear), -years * periodsPerYear));
                return p.toFixed(2);

            }

            function computeBalance(principal, annualRate, years, periodsPerYear, numberOfPaymentsPaidToDate) {
                var r = computePayment(invest, rate, numyear, periods);
                var f = principal * (Math.pow(1 + annualRate / periodsPerYear, numberOfPaymentsPaidToDate)) -
                    (r * ((Math.pow(1 + annualRate / periodsPerYear, numberOfPaymentsPaidToDate)) - 1) / (annualRate / periodsPerYear));
                return f.toFixed(2);
            }

        </script>
    </head>

    <body>
        <h1>Loan Calculator</h1><br>
        Amount Borrowed <input type="text" id="invest" size="5"> <br>
        Annual Rate <input type="text" id="rate" size="5"><br>
        Number of years <input type="text" id="numyear" size="5"><br>
        Payments per year <input type="text" id="periods" size="5"><br>
        Number of payments paid to date  <input type="text" id="pay" size="5"><br>
        <button type="button" onclick="doPayment()">Payment</button> <div id="output"></div> <br>
        <button type="button" onclick="doBalance()">Payoff amount</button><div id="secondOut"></div><br>
        <input type="button" value="Reset Form" onClick="reset"<button/>

    </body>
</html>

Answer 1

如果您还没有，则还需要定义reset功能以重置您的表单。你可以使用类似的东西：

  function reset(){
    document.getElementById("invest").value = "";
    document.getElementById("rate").value = "";
    document.getElementById("numyear").value = "";
    document.getElementById("periods").value = "";
    document.getElementById("pay").value = "";
  };

此外，您可以显着缩短变量声明。您不必首先定义变量，只需声明它们即可获得undefined的值。这没关系，因为你没有使用它们直到它们得到一个值（通过你填写表格并按下按钮）。此外，您可以通过在较长的命名变量版本上使用parseFloat（）来剪切中间变量。

你可以这样做：

var invest, rate, numyear, periods, paytodate;
function getValues(){
  invest = parseFloat(document.getElementById("invest").value);
  rate = parseFloat(document.getElementById("rate").value);
  numyear = parseFloat(document.getElementById("numyear").value);
  periods = parseFloat(document.getElementById("periods").value);
  paytodate = parseFloat(document.getElementById("pay").value);
}

Answer 2

这种影响的发生是因为您在页面加载时基本上声明了变量（并分配了它们的值）。当页面加载时，您的字段中没有信息，因此无法恢复。

一个简单的解决方案是通过使用＆＃34; loader＆＃34;来获取您的值。函数内部的函数：

var inv = 0;
var r = 0;
var num = 0;
var per = 0;
var pay = 0;
var invest = 0;
var rate = 0;
var numyear = 0;
var periods = 0;
var paytodate = 0;

function getValues() {
    inv = document.getElementById("invest").value;
    r = document.getElementById("rate").value;
    num = document.getElementById("numyear").value;
    per = document.getElementById("periods").value;
    pay = document.getElementById("pay").value;
    invest = parseFloat(inv);
    rate = parseFloat(r);
    numyear = parseFloat(num);
    periods = parseFloat(per);
    paytodate = parseFloat(pay);
}

function doPayment() {
    getValues();
    var result = computePayment(invest, rate, numyear, periods);
    document.getElementById("output").innerHTML = result;

}

function doBalance() {
    getValues();
    var result = computeBalance(invest, rate, numyear, periods, paytodate);
    document.getElementById("secondOut").innerHTML = result;
}

function computePayment(principal, annualRate, years, periodsPerYear) {
    getValues();
    var p = (principal * annualRate / periodsPerYear) / (1 - Math.pow((1 + annualRate / periodsPerYear), -years * periodsPerYear));
    return p.toFixed(2);

}

function computeBalance(principal, annualRate, years, periodsPerYear, numberOfPaymentsPaidToDate) {
    getValues();
    var r = computePayment(invest, rate, numyear, periods);
    var f = principal * (Math.pow(1 + annualRate / periodsPerYear, numberOfPaymentsPaidToDate)) -
            (r * ((Math.pow(1 + annualRate / periodsPerYear, numberOfPaymentsPaidToDate)) - 1) / (annualRate / periodsPerYear));
    return f.toFixed(2);
}

另外，检查HTML上的最后一行，我认为它应该是：

<button type="button" value="Reset Form" onClick="reset">Reset</button>

我可以在getElementById中使用全局变量吗？

2 个答案: