CODEWITHSUNDEEP
javascripthtmlbutton
Mitchell van Zuylen
Mitchell van Zuylen

Reputation: 4135

Incrementing an int via a button returns unintended behavior.

I have a variable that i wish to increment. If i do it like this, it works fine:

var curTrial = 0;

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

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

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

This results in 0123, as expected/intended.

However, if i spice it up a little with a button, it'll behave strangely.

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

Now, the value still increments with one at a time, but i would expect it to be called once for each button press. Instead, it appears to be called double the amount of last time (once, twice, four times, eight times etc)

Upvotes: 0

Views: 51

Answers (4)

sanket
sanket

Reputation: 664

Remove $("#next").click(function(f) { StartExperiment(); }); from runTrial() function. What you are doing is binding a click event everytime RunTrial() is called. clicking on submit button, will trigger runTrial function as many times the number of click events binded to it. Just bind the event once and it will work everytime the button is clicked

Upvotes: 0

vatz88
vatz88

Reputation: 2452

You are attaching a click event handler each time inside the function RunTrial() and StartExperiment()

Sloution

  1. Remove the event handlers from the funtion and put them in $(document).ready block.
  2. Use $("#next").unbind( "click" ); to unbind the event.

Well first one is preferable.

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>

Upvotes: 1

Sagar V
Sagar V

Reputation: 12478

  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>

Upvotes: 0

Daniel T.
Daniel T.

Reputation: 38410

It's because in RunTrial(), you call StartExperiment(), which adds a new click listener to the #next button, so every time you click it, you're adding on a new click listener. If you just remove that line, you'll see that it works as intended (only one prompt per click).

Upvotes: 1

Related Questions