Undefined Result for Variable with Javascript innerHTML function
Ad
I'm writing some code for a prototype banking website and am having a problem carrying some math into the HTML text. As shown below, the three numerical values I am wanting to show up are instead returning "undefined." These undefined items should be 22.69, 972.69, and 972.69 respectively.
Can someone explain why this is happening and suggest a potential solution?
Here is my JS / HTML:
document.getElementById("lad").innerHTML = lineAmountDue;
document.getElementById("lcb").innerHTML = lineCurrentBalance;
document.getElementById("lbb").innerHTML = lineBeginningBalance;
var lineAmountDue = "Amount Due = " + varAmountDue;
var lineCurrentBalance = "Current Balance = " + varCurrentBalance;
var lineBeginningBalance = "Beginning Balance = " + varBeginningBalance;
var varAmountDue = 22.69;
var varCurrentBalance = 972.69;
var varBeginningBalance = 972.69;
pn_btn.onclick = function() {
varCurrentBalance = varCurrentBalance - varAmountDue;
varAmountDue = varAmountDue*0;
};
lf_btn.onclick = function() {
var load_value = prompt("How much money do you want to load?", "10");
var num1 = parseFloat(load_value);
if (load_value != null) {
varCurrentBalance = varCurrentBalance + num1;
}
}
table, th {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
background-color: #1D4E86;
color: white;
}
td {
text-align: left;
background-color: #FFFFFF;
color: black;
}
div.bold_font {
font-weight: bold;
}
tr:nth-child(even) {background-color: #f2f2f2}
p {
color: black;
}
.container {width:900px;
margin:5px auto 5px auto;
padding:5px;}
#white_font {
color:white;
}
head {
background-color: #F47C20;
}
html {
background-color: #FFFFFF;
}
<html>
<div class="container">
<head>
<link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="style.css">
<!-- img src="Logo_pic.png" text-align="left" width="900" -->
</head>
<body bgcolor="#D3D1D2">
<div style="width:100%;">
Account Details
<br>
<!--This is the left column -->
<div style="float:left; width:50%;">
<img src="Graph.png"text-align="left" height="300">
</div>
<!--This is the right column -->
<div style="float:right; width:50%; ">
<!--This is the "Pay Now" button -->
<h1 style=font-family:Arial;text-left;size:14pt;color:#FFFFFF;>
</h1 style=color:black>
<p id="lad"></p>
<p id="lcb"></p>
<p id="lbb"></p>
<input type="button" id="pn_btn" value="Pay Now" />
<input type="button" id="lf_btn" value="Load Funds" />
<br>
<br>
Transactions this Month
<table style="width:90%">
<thead>
<tr>
<th>Recipient</th>
<th>Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Crif Dogs</td>
<td>December 5, 2015</td>
<td>$4.56</td>
</tr>
<tr>
<td>Tony's Pizza</td>
<td>December 6, 2015</td>
<td>$10.57</td>
</tr>
<tr>
<td>Xian's Famous Foods</td>
<td>December 7, 2015</td>
<td>$7.56</td>
</tr>
</tbody>
</table>
<br>
<br>
</div>
</div>
<script src="java_v2.js"></script>
</body>
</html>
</body>
</div>
Any thoughts on how to fix this? I'm unfamiliar with the error and relatively new to JS. Thank you all for your help - I genuinely appreciate it.
Ad
Answer
Ad
You are defining you items in the wrong order, JavaScript executes sequentially line by line (top-down). You will want to define the items you use first before assigning them with .innerHTML
var varAmountDue = 22.69;
var varCurrentBalance = 972.69;
var varBeginningBalance = 972.69;
var lineAmountDue = "Amount Due = " + varAmountDue;
var lineCurrentBalance = "Current Balance = " + varCurrentBalance;
var lineBeginningBalance = "Beginning Balance = " + varBeginningBalance;
document.getElementById("lad").innerHTML = lineAmountDue;
document.getElementById("lcb").innerHTML = lineCurrentBalance;
document.getElementById("lbb").innerHTML = lineBeginningBalance;
pn_btn.onclick = function() {
varCurrentBalance = varCurrentBalance - varAmountDue;
varAmountDue = varAmountDue*0;
};
lf_btn.onclick = function() {
var load_value = prompt("How much money do you want to load?", "10");
var num1 = parseFloat(load_value);
if (load_value != null) {
varCurrentBalance = varCurrentBalance + num1;
}
}
table, th {
border: 1px solid black;
border-collapse: collapse;
}
th {
text-align: left;
background-color: #1D4E86;
color: white;
}
td {
text-align: left;
background-color: #FFFFFF;
color: black;
}
div.bold_font {
font-weight: bold;
}
tr:nth-child(even) {background-color: #f2f2f2}
p {
color: black;
}
.container {width:900px;
margin:5px auto 5px auto;
padding:5px;}
#white_font {
color:white;
}
head {
background-color: #F47C20;
}
html {
background-color: #FFFFFF;
}
<html>
<div class="container">
<head>
<link rel="stylesheet" type="text/css" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="style.css">
<!-- img src="Logo_pic.png" text-align="left" width="900" -->
</head>
<body bgcolor="#D3D1D2">
<div style="width:100%;">
Account Details
<br>
<!--This is the left column -->
<div style="float:left; width:50%;">
<img src="Graph.png"text-align="left" height="300">
</div>
<!--This is the right column -->
<div style="float:right; width:50%; ">
<!--This is the "Pay Now" button -->
<h1 style=font-family:Arial;text-left;size:14pt;color:#FFFFFF;>
</h1 style=color:black>
<p id="lad"></p>
<p id="lcb"></p>
<p id="lbb"></p>
<input type="button" id="pn_btn" value="Pay Now" />
<input type="button" id="lf_btn" value="Load Funds" />
<br>
<br>
Transactions this Month
<table style="width:90%">
<thead>
<tr>
<th>Recipient</th>
<th>Date</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Crif Dogs</td>
<td>December 5, 2015</td>
<td>$4.56</td>
</tr>
<tr>
<td>Tony's Pizza</td>
<td>December 6, 2015</td>
<td>$10.57</td>
</tr>
<tr>
<td>Xian's Famous Foods</td>
<td>December 7, 2015</td>
<td>$7.56</td>
</tr>
</tbody>
</table>
<br>
<br>
</div>
</div>
<script src="java_v2.js"></script>
</body>
</html>
</body>
</div>
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad