使用Javascript innerHTML函数的变量的未定义结果

时间：2015-12-14 00:40:17

标签： javascript html

我正在为原型银行网站编写一些代码，并且在HTML文本中携带一些数学问题。如下所示，我想要显示的三个数值是返回＆＃34; undefined。＆＃34;这些未定义的项目应分别为22.69,972.69和972.69。

enter image description here

有人可以解释为什么会这样，并建议一个潜在的解决方案吗？

这是我的JS / HTML：

＆＃13;
＆＃13; 
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;
		}
}
＆＃13; 
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;
}
＆＃13; 
<html>
<div class="container">
<head>

<link rel="stylesheet" type="text/css" 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>
＆＃13;
＆＃13;
＆＃13;

有关如何解决此问题的任何想法？我不熟悉这个错误并且对JS来说比较新。谢谢大家的帮助 - 我真的很感激。

1 个答案:

答案 0 :(得分：1)

您正在以错误的顺序定义项目，JavaScript逐行顺序执行（自上而下）。在使用.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" 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>

相关问题
最新问题