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>












share|improve this question



















  • 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














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>












share|improve this question



















  • 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












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>












share|improve this question















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






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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












  • 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







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












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






share|improve this answer




















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













     

    draft saved


    draft discarded


















    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

























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






    share|improve this answer
























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






      share|improve this answer






















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






        share|improve this answer












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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 9 at 22:31









        Jake Long

        133




        133



























             

            draft saved


            draft discarded















































             


            draft saved


            draft discarded














            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





















































            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







            Popular posts from this blog

            How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

            Syphilis

            Darth Vader #20