我可以将全局变量与getElementById一起使用吗?

Can I use a global variable with getElementById?

本文关键字：一起 getElementById 全局变量 我可以      更新时间：2023-09-26

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

<!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>

如果您还没有，您还需要定义一个 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);
}

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

一个简单的解决方案是通过在方法中使用"加载器"函数来获取值：

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>
相关文章：