Question

我有一个计算器，它应该在分析收集了先前功能中用户输入的变量后显示总计。但是，只有1/3的用于显示总计的框实际上显示了一个值，其他两个框保持空白。有效的是“ DisplayTotalAssets”。

我不确定是什么导致了问题。在进行一些计算后，我在一个只读文本框中使用.getElementById来显示总计。我尝试查找使用多个.getElementById并排放置是否存在问题，但是我没有任何干扰的经验。以前，我以为使用oninput时调用多个函数是问题所在，但是我检查了语法，这似乎是正确的。

已编辑为可复制。如果某种方法看起来很奇怪，那可能是因为我在整个程序中削减了很多其他多余的东西。

var LiquidTotal;
var InvestTotal;
var CurrentTotal;
var LoansTotal;
var TotalAssets;
var TotalLiables;
var NetWorth;

function ValidNum(n) {
  n = n.replace(/\-/g, '');
  n = n.replace(/\,/g, '');
  n = n.replace(/\$/g, '');

  if (!isNaN(parseFloat(n)) && isFinite(n)) {
    return parseFloat(n).toFixed(2);
  } else {
    return parseFloat(0.00).toFixed(2);
  }
}

function LiquidMath() {
  var a = ValidNum(document.getElementById("cash").value);

  a = parseFloat(a);

  LiquidTotal = a;

  if (isNaN(LiquidTotal)) {
    return false;
  } else {
    document.getElementById("DisplayLiquidTotal").value = '$' + parseFloat(LiquidTotal).toFixed(2);
  }

  return document.getElementById("LiquidTotal").value;
}

function InvestMath() {
  var a = ValidNum(document.getElementById("stocks").value);

  a = parseFloat(a);

  InvestTotal = a;

  if (isNaN(InvestTotal)) {
    return false;
  } else {
    document.getElementById("DisplayInvestTotal").value = '$' + parseFloat(InvestTotal).toFixed(2);
  }

  return document.getElementById("InvestTotal").value;
}

function CurrentMath() {
  var a = ValidNum(document.getElementById("utilities").value);

  a = parseFloat(a);

  CurrentTotal = a;

  if (isNaN(CurrentTotal)) {
    return false;
  } else {
    document.getElementById("DisplayCurrentTotal").value = '$' + parseFloat(CurrentTotal).toFixed(2);
  }

  return document.getElementById("CurrentTotal").value;
}

function LoansMath() {
  var a = ValidNum(document.getElementById("education").value);

  a = parseFloat(a);

  LoansTotal = a;

  if (isNaN(LoansTotal)) {
    return false;
  } else {
    document.getElementById("DisplayLoansTotal").value = '$' + parseFloat(LoansTotal).toFixed(2);
  }

  return document.getElementById("LoansTotal").value;
}

function AssetsTotal() {
  TotalAssets = LiquidTotal + InvestTotal;

  if (isNaN(TotalAssets)) {
    return false;
  } else {
    document.getElementById("DisplayTotalAssets").value = '$' + parseFloat(TotalAssets).toFixed(2);
  }

  return document.getElementById("TotalAssets").value;
}

function LiablesTotal() {
  TotalLiables = CurrentTotal + LoansTotal;

  if (isNaN(TotalLiables)) {
    return false;
  } else {
    document.getElementById("DisplayTotalLiables").value = '$' + parseFloat(TotalLiables).toFixed(2);
  }

  return document.getElementById("TotalLiables").value;
}

function GrandTotal() {
  NetWorth = TotalAssets - TotalLiables;

  if (isNaN(NetWorth)) {
    return false;
  } else {
    document.getElementById("DisplayNetWorth").value = '$' + parseFloat(NetWorth).toFixed(2);
  }
}

<div id="assets" class="col-xs-6">
  <h3>Assets</h3>
  <h4>Liquid Assets</h4>
  <div class="row" style="padding:1px;">
    <div class="col-xs-8">Cash On Hand: <input type="text" id="cash" onblur="LiquidMath()" oninput="AssetsTotal(); LiablesTotal(); GrandTotal();" class="form-control" maxlength="30" style="background-color: #FFFFE0;" /></div>
    <div class="col-xs-8">Total: <input type="text" id="DisplayLiquidTotal" onblur="LiquidMath()" readonly="readonly" class="form-control" maxlength="30" style="background-color: #FFFFE0;" /></div>
  </div>

  <h4>Investments</h4>
  <div class="row" style="padding:1px;">
    <div class="col-xs-8">Stocks: <input type="number" id="stocks" onblur="InvestMath()" oninput="AssetsTotal(); LiablesTotal(); GrandTotal();" class="form-control" maxlength="30" style="background-color: #FFFFE0;" /></div>
    <div class="col-xs-8">Total: <input type="text" id="DisplayInvestTotal" onblur="InvestMath()" readonly="readonly" class="form-control" maxlength="30" style="background-color: #FFFFE0;" /></div>
  </div>
</div>

<div id="liables" class="col-xs-6">
  <h3>Liabilities</h3>
  <h4>Current Liabilities (due within 1 month)</h4>
  <div class="row" style="padding:1px;">
    <div class="col-xs-8">Utilities: <input type="number" id="utilities" onblur="CurrentMath()" oninput="AssetsTotal(); LiablesTotal(); GrandTotal();" class="form-control" maxlength="30" style="background-color: #FFFFE0;" /></div>
    <div class="col-xs-8">Total: <input type="text" id="DisplayCurrentTotal" onblur="CurrentMath()" readonly="readonly" class="form-control" maxlength="30" style="background-color: #FFFFE0;" /></div>
  </div>

  <h4>Long-Term Liabilities</h4>
  <div class="row" style="padding:1px;">
    <div class="col-xs-8">Education Loans: <input type="text" id="education" onblur="LoansMath()" oninput="AssetsTotal(); LiablesTotal(); GrandTotal();" class="form-control" maxlength="30" style="background-color: #FFFFE0;" /></div>
    <div class="col-xs-8">Total: <input type="text" id="DisplayLoansTotal" onblur="LoansMath()" readonly="readonly" class="form-control" maxlength="30" style="background-color: #FFFFE0;" /></div>
  </div>
</div>

<div class="row" style="padding:1px;">
  <div class="col-xs-8">
    <div class="col-xs-8">
      <h4>Total Assets:</h4> <input type="text" id="DisplayTotalAssets" readonly="readonly" class="form-control" maxlength="30" style="background-color: #FFFFE0;" /></div>
  </div>

  <div class="col-xs-8">
    <div class="col-xs-8">
      <h4>Total Liabilities:</h4> <input type="text" id="DisplayTotalLiables" readonly="readonly" class="form-control" maxlength="30" style="background-color: #FFFFE0;" /></div>
  </div>

  <div class="col-xs-8">
    <div class="col-xs-8">
      <h4>Net Worth:</h4> <input type="text" id="DisplayNetWorth" readonly="readonly" class="form-control" maxlength="30" style="background-color: #FFFFE0;" /></div>
  </div>
</div>

Answer 1

通过更改所有功能中的return语句，修复了控制台错误和整个原始问题

else
   {
    return document.getElementById("DisplayLiquidTotal").value = '$' + parseFloat(LiquidTotal).toFixed(2);
   }

getElementById无法正确接收输入/未显示-javascript

1 个答案: