JQuery keyup event is incremented - "function" will be set to 0

Question

I have three input fields to search for a JSON tree. If all three fields are completed and correct, receive data from the next JSON level.

I count the number through a keyup event to get the following JSON tree data. But every time all three fields are filled, the counter will be reset.

HTML

<h1>sein</h1> <form> <input type="text" id=simple_present placeholder="simple present"> <input type="text" id=simple_past placeholder="simple past"> <input type="text" id=past_participle placeholder="past participle"> </form> <div class="answer">Enter: be - was - been</div> 

Js

 $('input').on('keyup', function() { var count = 0; if (this.value === json.verbs.irregular[count++][this.id]) { $(this).prop('disabled', true).next().focus(); } if ($('input:not(:disabled)').length === 0) { $('input').val('').prop('disabled', false).first().focus(); $('h1').text(json.verbs.irregular[count++].infinitiv); alert(count); } }); 

Perhaps the variable will be set to 0 in each key event? But I can not install it outside keyup -event!

Here is a demonstration of what I have done so far.

Just enter:

• will be
• was
• was

Any ideas?

Answer 1

You can try this

 var count = 0, amount = json.verbs.irregular.length-1, current = 0, inputs = $("#simple_present, #simple_past, #past_participle"); $(inputs).on('keyup', function() { if (this.value === json.verbs.irregular[count][this.id]) { $(this).prop('disabled', true).next().focus(); } if ($('input:not(:disabled)').length === 0) { $('input').val('').prop('disabled', false).first().focus(); if(current < amount) { current++; count++; } else { current=0; count=0; } $('h1').text(json.verbs.irregular[current].infinitiv); } });​ 

Demo .

Answer 2

There is something working:

http://jsfiddle.net/fantactuka/56VBk/