Why this function doesn’t work in ‘for loop’ ? [jquery]

[sayedtaqui]

Hi , I m learning jquery and I m stuck at a point.
Im creating a form and I want the fields to appear when the user focus on the input fields.
http://codepen.io/sayed2x2/pen/urkhp
The function is working fine, which is very simple

$(‘#input1’).focus(function(){
$(‘#row2’).show();
});

but I dont want to repeat the same code over and over again, so I wanted to use ‘for loop for it’. like this

for(var j=1; j<=4; j++) {
var k=j+1;

$(‘#input’+j).focus(function(){
$(‘#row’+k).show();
});
}

But I have no idea why this isn’t working.
can sombody please explain the reason?

Thanks.

[pixelgrid]

do you want all the fields to appear once the user focuses on the first input or one by one?

[sayedtaqui]

I want fields to appear one by one.

[pixelgrid]

if you watch your code after focusing on the first input the field that appears is the fifth one.thats because of the k var at the time of the code being executed.

i came up with this which works

for(var i=2; i<=5; i++ ){
$(‘#row’+i).hide();
}

$(‘input’).focus(function(){
var num = $(this).attr(‘id’).match(/d+$/)[0];
$(‘#row’+(+num+1)).show();
});

[sayedtaqui]

Thanks a lot, but if you could explain a little more, i have a hard time understanding the reason you mention above. and why use pattern match?

[pixelgrid]

the $(‘#input’+j).focus() function registers event listeners for all the inputs 1-5 and runs on page load after that the k value remains 5, but the function inside .focus() runs once the first input gets focus.At that time it only enables the fifth row because of the k value.

my code depends on getting the number after the #input to do that i used .match() that returns an array with each match. in our case is only one match so the first element is the number

[sayedtaqui]

Today I learned a very basic essential thing of jquery from you, which I m sure will help me a long way understanding the logic. Now I understand why my code wasn’t working but im sorry for being dumb to understand your code.
What I understand in $(this).attr(‘id’).match(/d+$/)[0] you are grabbing hold of the number which is coming under the attribute ‘id’ . but the regular expression (/d$/)) was enough to match the number then why did you use match(/d+$/)[0] and then why the first element of the array ‘[0]’.
And then (+num+1). I m really sorry , im a beginner in jquery and it going from top of my head. I would be really thankfull to you if you explain it a little more.
Again sorry for begin dumb.

[pixelgrid]

the .match() returns an array so to access the number we have to
target it with brackets [] our match is the first so [0];

with the + in the regular expression we are targeting all the numbers at the end of the string .the /d$/ on input45 would return 5.

the + before num is typecasting for int in javascript.
with num = 1;
num+1 would return 11 as a string

+num+1 would return the number 2

[sayedtaqui]

Thank you very much , after experiment with your code 10 times. now I completley understand how its working and why you used those things. Today I learned a lot from you.
Thanks again.

[pixelgrid]

im glad i helped

[sayedtaqui]

just one last thing.
I was experimenting and wrote this seprately

k= 3;
num= k+1;
y= ‘row’+(num+1);
alert(y);
//returns row5

So why in our case we are required to use (+num+1) or else it returns 11 as a string but doesn’t add the value ?

[pixelgrid]

the num of the inputs is taken from the match function which returns a string, so you dont have 2 for example but ‘2’ . with +’2′ the string ‘2’ becomes the number 2

[sayedtaqui]

ok got it thank you, now no more doubts

[Author]

Posts