按钮计数器未递增

Button Counter not incrementing

本文关键字：计数器 按钮      更新时间：2023-09-26

我一直在努力计算点击按钮的次数。我有这个代码，在前4个标签中，它显示输入的评估编号。当第二次点击时，它应该显示在接下来的4个标签中（5、6、7、8），但当我第二次单击按钮时，它不会增加点击量变量，并且在文本字段中输入的评估数字显示在前4个标签，而不是第二个4个标签。为什么clicks变量的增量不正确？我做错了什么？

<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>

将变量声明放在函数之外。否则，每次调用函数时，计数器都会设置为零，然后返回到开始的位置。

...
var clicks = 0;
function AddModule(frm){
...

此外，要调试类似的情况，您应该尝试使用FireBug的内置开发工具（对于大多数浏览器，您可以通过点击F12打开工具）。另一个选项是添加console.log(your_variable1, your_variable2, ...)，以查看在脚本执行期间如何修改这些值。

您需要将此行：var clicks = 0;移到函数之外，但仍在脚本标记中。实际上，每次单击按钮并调用函数时，它都会将clicks变量设置回0。

这是一把正在工作的小提琴：http://jsfiddle.net/lwalden/B7uja/

相关文章：