错误查找，HTML&；Javascript_Javascript_Html_Debugging

错误查找，HTML&；Javascript

javascript html debugging

错误查找，HTML&；Javascript,javascript,html,debugging,Javascript,Html,Debugging,在为一个类设计的看似简单的HTML/Javascript页面中，我很难找到bug。我花了好几个小时查看了这些页面的代码（还有3个让我发疯的页面）。我不知道是否有一些语法是我漏掉的？在本页中，我们将编写一个脚本，该脚本将破译客户是否超过其信用额度。在本页和其他3页中，onclick事件似乎不起作用。以下是完整的代码： <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

在为一个类设计的看似简单的HTML/Javascript页面中，我很难找到bug。我花了好几个小时查看了这些页面的代码（还有3个让我发疯的页面）。我不知道是否有一些语法是我漏掉的？在本页中，我们将编写一个脚本，该脚本将破译客户是否超过其信用额度。在本页和其他3页中，onclick事件似乎不起作用。以下是完整的代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Homework 3 Part 3</title>
<style type="text/css">
tr.visiting {background-color: #000000; }


h1.header {color: #333333;} 
.creditbox { 

    background-color: #ffcc66;
    width: 60%;
    border:solid 5px #666666;
    margin-left:auto;
margin-right:auto;

}

table {
    text-align: right;
}
td.visiting {background-color: #000000; }
input {text-align: right;}
</style>
<script type="text/javascript">
/* <![CDATA[ */

function creditCalc() 
{
    var account, credLim, begBalance, totalCharged, credit, balance, endBalance;

    account = parseInt(document.creditLimitForm.accountNum.value);
    credLim = parseInt(document.creditLimitForm.creditLimit.value);
    begBalance = parseInt(document.creditLimitForm.beginningBalance.value);
    totalCharged = parseInt(document.creditLimitForm.amtCharged.value);
    credit = parseInt(document.creditLimitForm.creditsApplied.value);   

    balance = begBalance + totalCharged;
    endBalance = balance - credit;

    documemt.creditLimitForm.creditDisplay.value("Account Number:  " + account + "\nCredit Limit:  " + credLim + "\nBeginning Balance: " + begBalance + "\nTotal Charged this month:  " + totalCharged + "\nTotal credits this month:  " + credit + "\nCredit Available:  " + endBalance);

document.getElementById("creditAvailable").innerHTML = endBalance;

}

/*]]>*/
</script>

</head>

<body bgcolor = "#ffffff" alink = "#FFFFCC" link = "#FFFFCC" vlink = "#FFFFCC">
<table id="border" width="70%" align ="center" cellpadding="0">
        <tr>
        <td align="center">
            <img src="hw3Banner.jpg" alt="Homework Banner" align="middle" />
        </td>
        </tr>
    </table>
    <br />
    <table border="1" width="500" align ="center" bgcolor="#666666" cellpadding="2.5">
     <tr><td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3.html">HW 3 Main</a></td>
     <td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt1.html">Part 1</a></td>
     <td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt2.html">Part 2</td>
     <td class="visiting" align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt3.html">Part 3</a></td>
    <td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt4.html">Part 4</a></td>
    <td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt5.html">Part 5</a></td>
    <td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt6.html">Part 6</a></td></tr></table>

<br />
<div class="creditbox" align="center" >
<form name="creditLimitForm" action="">
<br />
<h1 class="header">Customer Credit Limit Check</h1>
<br />


<table class="creditLimitForm">
<tr>
<td>Customer Account Number:</td>
<td><input type="text" id="accountNum" name="accountNum" size="15" /></td>
</tr>
<tr>
<td>1st of Month Balance: </td>
<td>$<input type="text" id="beginningBalance" name="beginningBalance" size="15" /></td></tr>
<tr>
<td>Total charged by customer this month: </td>
<td>$<input type="text" id="amtCharged" name="amtCharged" size="15" /></td>
</tr>
<tr>
<td>Total credits applied to account </td>
<td>$<input type="text" id="creditsApplied" name="creditsApplied" size="15" /></td>
</tr>
<tr>
<td>Allowed Credit Limit</td>
<td>$<input type="text" id= "creditLimit" name="creditLimit" size="15" /></td>
</tr>
</table>

<br />
<textarea rows="7" cols="50" name="creditDisplay"></textarea>
<br /><br />
<input type="button" onclick="creditCalc();" value="Check Credit" />&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" value="Reset Form" />

<p>Credit Available: </p>
<p id="creditAvailable"></p>

</form>
<br />
<br />
</div>
</body>
</html>


家庭作业3第三部分
tr.VISING{背景色：#000000；}
h1.header{color:#333；}
.creditbox{
背景色：#ffcc66；
宽度：60%；
边框：实心5px#666666；
左边距：自动；
右边距：自动；
}
桌子{
文本对齐：右对齐；
}
td.visting{背景色：#000000；}
输入{文本对齐：右；}
/* */






客户信用限额检查


客户帐号：
月初余额：
$
本月客户收取的总费用：
$
应用于帐户的总学分
$
允许信用额度
$





可用信贷额：

有什么好的除虫软件可以帮助你吗？

使用Firefox的Firebug或Chrome的内置调试工具（或其他浏览器的类似工具），它会让你的生活更轻松

至于您的具体问题，

onclick

确实应该调用该函数，因此错误一定在

creditCalc

函数的某个地方。如果您仍然有问题，至少可以转到浏览器中的错误控制台并在此处发布输出；如果没有任何错误消息，那么就很难猜测问题可能是什么

编辑：错误控制台中也可能没有任何错误，无论您是否相信，这对回答您的问题的人来说也是有用的信息。

在chrome上，很容易在javascript中找到错误。
在chrome中加载或重新加载页面之前，只需单击鼠标右键。选择

inspect element

而不是在底部工具栏上。查找

控制台

单击它，您将能够看到文件中的任何javascript错误。

好的，在这里尝试以下代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Homework 3 Part 3</title>
<style type="text/css">
tr.visiting {background-color: #000000; }


h1.header {color: #333333;} 
.creditbox { 

    background-color: #ffcc66;
    width: 60%;
    border:solid 5px #666666;
    margin-left:auto;
margin-right:auto;

}

table {
    text-align: right;
}
td.visiting {background-color: #000000; }
input {text-align: right;}
</style>
<script type="text/javascript">
/* <![CDATA[ */

function creditCalc() 
{
var account, credLim, begBalance, totalCharged, credit, balance, endBalance;

    account = parseInt(document.creditLimitForm.accountNum.value);
    credLim = parseInt(document.creditLimitForm.creditLimit.value);
    begBalance = parseInt(document.creditLimitForm.beginningBalance.value);
    totalCharged = parseInt(document.creditLimitForm.amtCharged.value);
    credit = parseInt(document.creditLimitForm.creditsApplied.value);   

    balance = begBalance + totalCharged;
    endBalance = balance - credit;
/*
    documemt.creditLimitForm.creditDisplay.value("Account Number:  " + account + "\nCredit Limit:  " + credLim + "\nBeginning Balance: " + begBalance + "\nTotal Charged this month:  " + totalCharged + "\nTotal credits this month:  " + credit + "\nCredit Available:  " + endBalance);*/

document.getElementById("creditAvailable").innerHTML = "Account Number:  " + account + "\nCredit Limit:  " + credLim + "\nBeginning Balance: " + begBalance + "\nTotal Charged this month:  " + totalCharged + "\nTotal credits this month:  " + credit + "\nCredit Available:  " + endBalance;

}

/*]]>*/
</script>

</head>

<body bgcolor = "#ffffff" alink = "#FFFFCC" link = "#FFFFCC" vlink = "#FFFFCC">
<table id="border" width="70%" align ="center" cellpadding="0">
        <tr>
        <td align="center">
            <img src="hw3Banner.jpg" alt="Homework Banner" align="middle" />
        </td>
        </tr>
    </table>
    <br />
    <table border="1" width="500" align ="center" bgcolor="#666666" cellpadding="2.5">
     <tr><td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3.html">HW 3 Main</a></td>
     <td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt1.html">Part 1</a></td>
     <td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt2.html">Part 2</td>
     <td class="visiting" align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt3.html">Part 3</a></td>
    <td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt4.html">Part 4</a></td>
    <td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt5.html">Part 5</a></td>
    <td align = "center"><font face ="baskerville" color="#FFFFCC" /><a href="homework3pt6.html">Part 6</a></td></tr></table>

<br />
<div class="creditbox" align="center" >
<form name="creditLimitForm" action="">
<br />
<h1 class="header">Customer Credit Limit Check</h1>
<br />


<table class="creditLimitForm" id="creditLimitForm">
<tr>
<td>Customer Account Number:</td>
<td><input type="text" id="accountNum" name="accountNum" size="15" /></td>
</tr>
<tr>
<td>1st of Month Balance: </td>
<td>$<input type="text" id="beginningBalance" name="beginningBalance" size="15" /></td></tr>
<tr>
<td>Total charged by customer this month: </td>
<td>$<input type="text" id="amtCharged" name="amtCharged" size="15" /></td>
</tr>
<tr>
<td>Total credits applied to account </td>
<td>$<input type="text" id="creditsApplied" name="creditsApplied" size="15" /></td>
</tr>
<tr>
<td>Allowed Credit Limit</td>
<td>$<input type="text" id= "creditLimit" name="creditLimit" size="15" /></td>
</tr>
</table>

<br />
<textarea rows="7" cols="50" name="creditDisplay"></textarea>
<br /><br />
<input type="button" onclick="creditCalc();" value="Check Credit" />&nbsp;&nbsp;&nbsp;&nbsp;

<input type="reset" value="Reset Form" />

<p>Credit Available: </p>
<p id="creditAvailable"></p>

</form>
<br />
<br />
</div>
</body>
</html>


家庭作业3第三部分
tr.VISING{背景色：#000000；}
h1.header{color:#333；}
.creditbox{
背景色：#ffcc66；
宽度：60%；
边框：实心5px#666666；
左边距：自动；
右边距：自动；
}
桌子{
文本对齐：右对齐；
}
td.visting{背景色：#000000；}
输入{文本对齐：右；}
/* */






客户信用限额检查


客户帐号：
月初余额：
$
本月客户收取的总费用：
$
应用于帐户的总学分
$
允许信用额度
$





可用信贷额：

这造成了问题

documemt.creditLimitForm.creditDisplay.value

尝试发出警报并检查。

浏览器的调试器如何？与您的问题无关，但您应该放弃XML序言、doctype和语法。使用普通的

。XHTML过渡DOCTYPE（可以追溯到2000年）只适用于不理解XML的浏览器，并帮助从HTML到XML的过渡从未发生过，所以不要使用它。

  the problem with your this line otherwise its working fine.just try with alert instead.

     documemt.creditLimitForm.creditDisplay.value("Account Number:  " + account + "\nCredit    Limit:  " + credLim + "\nBeginning Balance: " + begBalance + "\nTotal Charged this month:  " + totalCharged + "\nTotal credits this month:  " + credit + "\nCredit Available:  " + endBalance);