Question

我一直在努力计算按钮被点击的次数。我有这个代码，在前4个标签中显示输入的评估编号。当第二次点击时，它应显示在接下来的4个标签（5,6,7,8）中，但是当我第二次单击该按钮时，它不会增加点击变量，并且在文本字段中输入的评估数字显示在前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>

Answer 1

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

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

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

Answer 2

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

这是一个工作小提琴：http://jsfiddle.net/lwalden/B7uja/

按钮计数器不递增

2 个答案: