通过按钮递增int会返回意外行为。

时间:2017-02-24 12:15:53

标签: javascript html button

我有一个我希望增加的变量。如果我这样做,它可以正常工作:

var curTrial = 0;

function inc(x) {
    x++;
    return x;
    }

function show () {
    document.write(curTrial)
    curTrial = inc(curTrial);
    }

show();show();show();show()

这会产生0123,符合预期/预期。

然而,如果我用按钮加一点点,它会表现得很奇怪。

<html>    
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>      
</head>
<body>

<div id="box" style="text-align:center">
    <div id="startTrial">Press any key to start the next trial</div>
      <button id="next"type="button">Submit</button>
</div>

<script>
  var curTrial = 0;

function inc(x) {
    x++;
    return x;
    }

function RunTrial() {

     prompt(curTrial);
     curTrial = inc(curTrial);
     $('#box').show();
     $("#next").click(function(f) { StartExperiment(); });
}
function StartExperiment() {
    $('#box').show();
    $("#next").click(function(f) { RunTrial(); });   
}
StartExperiment()
 </script>   
</div>
</body>
</html>

现在,值仍然一次增加一个,但我希望每次按下按钮都会调用一次。相反,它似乎被称为上一次的两倍(一次,两次,四次,八次等)

4 个答案:

答案 0 :(得分:1)

这是因为在RunTrial()中,您拨打StartExperiment(),这会在#next按钮上添加一个新的点击监听器,因此每次点击它时,您都可以使用{{1}}。重新添加新的单击侦听器。如果您只是删除该行,您将看到它按预期工作(每次点击只有一个提示)。

答案 1 :(得分:1)

每次在函数RunTrial()和click

中附加StartExperiment()事件处理程序

<强> SLOUTION

  1. 从功能中删除事件处理程序并将其放入$(document).ready块。
  2. 使用$("#next").unbind( "click" );取消绑定事件。
  3. 第一个是首选。

    var curTrial = 0;
    
    $(document).ready(function(){
      $("#next").click(function(f) { RunTrial(); });
    });
    
    function inc(x) {
        x++;
        return x;
    }
    
    function RunTrial() {
    
         prompt(curTrial);
         curTrial = inc(curTrial);
         $('#box').show();
         $("#next").click(function(f) { StartExperiment(); });
    }
    function StartExperiment() {
        $('#box').show();
    }
    StartExperiment();
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <html>    
    <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>      
    </head>
    <body>
    
    <div id="box" style="text-align:center">
        <div id="startTrial">Press any key to start the next trial</div>
          <button id="next"type="button">Submit</button>
    </div>
    </div>
    </body>
    </html>

答案 2 :(得分:0)

  var curTrial = 0;

function inc(x) {
    x++;
    return x;
    }

function RunTrial() {

     curTrial=prompt(curTrial);
     curTrial = inc(curTrial);
     $('#box').show();
     $("#next").click(function(f) { StartExperiment(); });
}
function StartExperiment() {
    $('#box').show();
    $("#next").click(function(f) { RunTrial(); });   
}
StartExperiment()
<html>    
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>      
</head>
<body>

<div id="box" style="text-align:center">
    <div id="startTrial">Press any key to start the next trial</div>
      <button id="next"type="button">Submit</button>
</div>
</div>
</body>
</html>

答案 3 :(得分:0)

从runTrial()函数中删除$("#next").click(function(f) { StartExperiment(); });。 你正在做的是每次调用RunTrial()时绑定一个click事件。 单击提交按钮,将触发runTrial函数的次数与绑定到它的点击事件的次数相同。 只需将事件绑定一次,每次单击按钮时它都会起作用