按钮计数器不递增
按钮计数器不递增
提问于 2014-04-20 21:39:56
我一直在努力计算按钮被点击的次数。我有这个代码，在前4个标签中显示输入的评估编号。当第二次单击时，它应该显示在接下来的4个标签中(5，6，7，8)，但是当我第二次单击该按钮时，它不会增加单击变量，并且textfield中输入的评估号将显示在前4个标签中，而不是第二个4个标签中。为什么单击变量没有正确地递增？我做错什么了？
<HTML>
<HEAD>
<TITLE>JavaScript Form - Input Text Field</TITLE>
</HEAD>
<BODY>
<FORM NAME="test">
<H2>Enter something into the field and press the button. <br>
Please try this a few times.</H2>
<P>Assessment 1 <INPUT TYPE="TEXT" NAME="Assessment1" size ="5">
Assessment 2 <INPUT TYPE="TEXT" NAME="Assessment2" size ="5">
Assessment 3 <INPUT TYPE="TEXT" NAME="Assessment3" size ="5">
Assessment 4 <INPUT TYPE="TEXT" NAME="Assessment4" size ="5">
<INPUT TYPE="Button" Value="Add Module" name = "myButton" onClick="AddModule(this.form)">
</P>
<b>Assessment1:</b><label id="assessment1"> </label>
<b>Assessment2:</b><label id="assessment2"> </label>
<b>Assessment3:</b><label id="assessment3"> </label>
<b>Assessment4:</b><label id="assessment4"> </label>
<b>Total:</b><label id="total"></label>
</br>
<b>Assessment1:</b><label id="assessment5"> </label>
<b>Assessment2:</b><label id="assessment6"> </label>
<b>Assessment3:</b><label id="assessment7"> </label>
<b>Assessment4:</b><label id="assessment8"> </label>
<b>Total:</b><label id="assessment5"></label>
<SCRIPT Language="JavaScript">
<!--//
function AddModule(frm){
var clicks = 0;
if (frm.Assessment1.value == "" || frm.Assessment2.value == "" || frm.Assessment3.value == "" || frm.Assessment4.value == "")
alert("You need to enter Assessment marks in all fields")
else{
clicks++;
window.document.test.myButton.value="Clicked " + clicks + " times";
//alert("The field contains the text: " + frm.Assessment1.value)
if (clicks ==1){
var assessment1 = frm.Assessment1.value
document.getElementById('assessment1').innerHTML = assessment1;
frm.Assessment1.value = ""
//alert("The field contains the text: " + frm.Assessment2.value)
var assessment2 = frm.Assessment2.value
document.getElementById('assessment2').innerHTML = assessment2;
frm.Assessment2.value = ""
//alert("The field contains the text: " + frm.Assessment3.value)
var assessment3 = frm.Assessment3.value
document.getElementById('assessment3').innerHTML = assessment3;
frm.Assessment3.value = ""
//alert("The field contains the text: " + frm.Assessment4.value)
var assessment4 = frm.Assessment4.value
document.getElementById('assessment4').innerHTML = assessment4;
frm.Assessment4.value = ""
var total = parseInt(assessment1) + parseInt(assessment2) + parseInt(assessment3) + parseInt(assessment4);
total = total/4;
document.getElementById('total').innerHTML = total;
}
if (clicks ==2){
var assessment5 = frm.Assessment1.value
document.getElementById('assessment5').innerHTML = assessment5;
frm.Assessment1.value = ""
//alert("The field contains the text: " + frm.Assessment2.value)
var assessment6 = frm.Assessment2.value
document.getElementById('assessment6').innerHTML = assessment6;
frm.Assessment2.value = ""
//alert("The field contains the text: " + frm.Assessment3.value)
var assessment7 = frm.Assessment3.value
document.getElementById('assessment7').innerHTML = assessment7;
frm.Assessment3.value = ""
//alert("The field contains the text: " + frm.Assessment4.value)
var assessment8 = frm.Assessment4.value
document.getElementById('assessment8').innerHTML = assessment8;
frm.Assessment4.value = ""
clicks++;
var total = parseInt(assessment5) + parseInt(assessment6) + parseInt(assessment7) + parseInt(assessment8);
total = total/4;
document.getElementById('assessment5').innerHTML = total;
}
}
}
//-->
</SCRIPT>
</FORM>
</BODY>
</HTML>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-20 21:43:12
将变量声明置于函数之外。否则，每次调用函数时，计数器被设置为零，并且您回到了开始的位置。
...
var clicks = 0;
function AddModule(frm){
...此外，要调试类似于此的情况，您应该尝试使用FireBug的内置开发工具(对于大多数浏览器，您可以通过点击FireBug打开工具)。另一个选项是添加console.log(your_variable1, your_variable2, ...)，查看如何在脚本执行期间修改这些值。
Stack Overflow用户
发布于 2014-04-20 21:47:20
您需要将这一行：var clicks = 0;移到函数之外，但仍然在脚本标记中。实际上，每次单击按钮并调用函数时，它都会将click变量设置为0。
这是一个有用的小提琴：http://jsfiddle.net/lwalden/B7uja/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23187875
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号