TutorialMeta
Ad

Undefined Result for Variable with Javascript innerHTML function

- 1 answer

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.

enter image description here

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
← Previous Post
Next Post →

Related Questions

Ad
Ad