getElementById not receiving input properly/not displaying - javascript
up vote
0
down vote
favorite
I have a calculator that is supposed to display totals after parsing variables that collected user input in previous functions. However, only 1/3 of the boxes meant for displaying the totals actually display a value, the other two stay blank. The one that works is "DisplayTotalAssets".
I'm not sure what exactly is causing the issue. I'm using .getElementById
in a readonly text box to display the totals after making some calculations. I tried looking up if there was an issue with using multiple .getElementById
so close together but I don't have any experience with interference. Before, I thought calling multiple functions when using oninput
was the problem, but I checked syntax and it seems to be correct.
Edited to be reproducible. If something seems like a weird way of doing it, it might be because I cut out so much of the other extra stuff that is in my full program.
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>
javascript html
|
show 6 more comments
up vote
0
down vote
favorite
I have a calculator that is supposed to display totals after parsing variables that collected user input in previous functions. However, only 1/3 of the boxes meant for displaying the totals actually display a value, the other two stay blank. The one that works is "DisplayTotalAssets".
I'm not sure what exactly is causing the issue. I'm using .getElementById
in a readonly text box to display the totals after making some calculations. I tried looking up if there was an issue with using multiple .getElementById
so close together but I don't have any experience with interference. Before, I thought calling multiple functions when using oninput
was the problem, but I checked syntax and it seems to be correct.
Edited to be reproducible. If something seems like a weird way of doing it, it might be because I cut out so much of the other extra stuff that is in my full program.
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>
javascript html
1
Any errors in the console? How do you call your functions?
– j08691
Nov 9 at 16:46
5
If you are having more than one dom elements with same id, thedocument.getElementById
returns the first one from dom tree it can find.
– HasilT
Nov 9 at 16:49
Please create a Minimal, Complete, and Verifiable example so we can see the issue on the question. But it looks like a problem with repeated id's as HasilT mentions above.
– Alvaro Montoro
Nov 9 at 17:52
@HasilT I've given all of elements that receive input or display information unique IDs, does it have to do with the fact that the output text box is a div inside of another div?
– Jake Long
Nov 9 at 21:01
1
@JakeLong — Open the developer tools in your browser. Go to the console. Run your code. Type something into the first input. Press tab. Look at the error message in the console. Click the line number to the right of the error message. It will take you straight to it.
– Quentin
Nov 9 at 21:08
|
show 6 more comments
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a calculator that is supposed to display totals after parsing variables that collected user input in previous functions. However, only 1/3 of the boxes meant for displaying the totals actually display a value, the other two stay blank. The one that works is "DisplayTotalAssets".
I'm not sure what exactly is causing the issue. I'm using .getElementById
in a readonly text box to display the totals after making some calculations. I tried looking up if there was an issue with using multiple .getElementById
so close together but I don't have any experience with interference. Before, I thought calling multiple functions when using oninput
was the problem, but I checked syntax and it seems to be correct.
Edited to be reproducible. If something seems like a weird way of doing it, it might be because I cut out so much of the other extra stuff that is in my full program.
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>
javascript html
I have a calculator that is supposed to display totals after parsing variables that collected user input in previous functions. However, only 1/3 of the boxes meant for displaying the totals actually display a value, the other two stay blank. The one that works is "DisplayTotalAssets".
I'm not sure what exactly is causing the issue. I'm using .getElementById
in a readonly text box to display the totals after making some calculations. I tried looking up if there was an issue with using multiple .getElementById
so close together but I don't have any experience with interference. Before, I thought calling multiple functions when using oninput
was the problem, but I checked syntax and it seems to be correct.
Edited to be reproducible. If something seems like a weird way of doing it, it might be because I cut out so much of the other extra stuff that is in my full program.
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>
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>
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>
javascript html
javascript html
edited Nov 9 at 23:14
asked Nov 9 at 16:44
Jake Long
133
133
1
Any errors in the console? How do you call your functions?
– j08691
Nov 9 at 16:46
5
If you are having more than one dom elements with same id, thedocument.getElementById
returns the first one from dom tree it can find.
– HasilT
Nov 9 at 16:49
Please create a Minimal, Complete, and Verifiable example so we can see the issue on the question. But it looks like a problem with repeated id's as HasilT mentions above.
– Alvaro Montoro
Nov 9 at 17:52
@HasilT I've given all of elements that receive input or display information unique IDs, does it have to do with the fact that the output text box is a div inside of another div?
– Jake Long
Nov 9 at 21:01
1
@JakeLong — Open the developer tools in your browser. Go to the console. Run your code. Type something into the first input. Press tab. Look at the error message in the console. Click the line number to the right of the error message. It will take you straight to it.
– Quentin
Nov 9 at 21:08
|
show 6 more comments
1
Any errors in the console? How do you call your functions?
– j08691
Nov 9 at 16:46
5
If you are having more than one dom elements with same id, thedocument.getElementById
returns the first one from dom tree it can find.
– HasilT
Nov 9 at 16:49
Please create a Minimal, Complete, and Verifiable example so we can see the issue on the question. But it looks like a problem with repeated id's as HasilT mentions above.
– Alvaro Montoro
Nov 9 at 17:52
@HasilT I've given all of elements that receive input or display information unique IDs, does it have to do with the fact that the output text box is a div inside of another div?
– Jake Long
Nov 9 at 21:01
1
@JakeLong — Open the developer tools in your browser. Go to the console. Run your code. Type something into the first input. Press tab. Look at the error message in the console. Click the line number to the right of the error message. It will take you straight to it.
– Quentin
Nov 9 at 21:08
1
1
Any errors in the console? How do you call your functions?
– j08691
Nov 9 at 16:46
Any errors in the console? How do you call your functions?
– j08691
Nov 9 at 16:46
5
5
If you are having more than one dom elements with same id, the
document.getElementById
returns the first one from dom tree it can find.– HasilT
Nov 9 at 16:49
If you are having more than one dom elements with same id, the
document.getElementById
returns the first one from dom tree it can find.– HasilT
Nov 9 at 16:49
Please create a Minimal, Complete, and Verifiable example so we can see the issue on the question. But it looks like a problem with repeated id's as HasilT mentions above.
– Alvaro Montoro
Nov 9 at 17:52
Please create a Minimal, Complete, and Verifiable example so we can see the issue on the question. But it looks like a problem with repeated id's as HasilT mentions above.
– Alvaro Montoro
Nov 9 at 17:52
@HasilT I've given all of elements that receive input or display information unique IDs, does it have to do with the fact that the output text box is a div inside of another div?
– Jake Long
Nov 9 at 21:01
@HasilT I've given all of elements that receive input or display information unique IDs, does it have to do with the fact that the output text box is a div inside of another div?
– Jake Long
Nov 9 at 21:01
1
1
@JakeLong — Open the developer tools in your browser. Go to the console. Run your code. Type something into the first input. Press tab. Look at the error message in the console. Click the line number to the right of the error message. It will take you straight to it.
– Quentin
Nov 9 at 21:08
@JakeLong — Open the developer tools in your browser. Go to the console. Run your code. Type something into the first input. Press tab. Look at the error message in the console. Click the line number to the right of the error message. It will take you straight to it.
– Quentin
Nov 9 at 21:08
|
show 6 more comments
1 Answer
1
active
oldest
votes
up vote
0
down vote
Fixed both the console errors and the entire original issue by changing the return statement in all of the functions
else
return document.getElementById("DisplayLiquidTotal").value = '$' + parseFloat(LiquidTotal).toFixed(2);
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Fixed both the console errors and the entire original issue by changing the return statement in all of the functions
else
return document.getElementById("DisplayLiquidTotal").value = '$' + parseFloat(LiquidTotal).toFixed(2);
add a comment |
up vote
0
down vote
Fixed both the console errors and the entire original issue by changing the return statement in all of the functions
else
return document.getElementById("DisplayLiquidTotal").value = '$' + parseFloat(LiquidTotal).toFixed(2);
add a comment |
up vote
0
down vote
up vote
0
down vote
Fixed both the console errors and the entire original issue by changing the return statement in all of the functions
else
return document.getElementById("DisplayLiquidTotal").value = '$' + parseFloat(LiquidTotal).toFixed(2);
Fixed both the console errors and the entire original issue by changing the return statement in all of the functions
else
return document.getElementById("DisplayLiquidTotal").value = '$' + parseFloat(LiquidTotal).toFixed(2);
answered Nov 9 at 22:31
Jake Long
133
133
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53229936%2fgetelementbyid-not-receiving-input-properly-not-displaying-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Any errors in the console? How do you call your functions?
– j08691
Nov 9 at 16:46
5
If you are having more than one dom elements with same id, the
document.getElementById
returns the first one from dom tree it can find.– HasilT
Nov 9 at 16:49
Please create a Minimal, Complete, and Verifiable example so we can see the issue on the question. But it looks like a problem with repeated id's as HasilT mentions above.
– Alvaro Montoro
Nov 9 at 17:52
@HasilT I've given all of elements that receive input or display information unique IDs, does it have to do with the fact that the output text box is a div inside of another div?
– Jake Long
Nov 9 at 21:01
1
@JakeLong — Open the developer tools in your browser. Go to the console. Run your code. Type something into the first input. Press tab. Look at the error message in the console. Click the line number to the right of the error message. It will take you straight to it.
– Quentin
Nov 9 at 21:08