How to concatenate variable and string in JavaScript?

Question

Please don't immediately mark this as a duplicate. I've looked at similar questions but still can't figure this out.

This is what I have currently:

$(document).ready(function(){
    for(var i=1;i<2;i++)
    {
        $("#MenuBarButton"+i).mouseover(function(){
            $("#ldheMenuBarLayer"+i).stop().animate({height:'66px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
        $("#MenuBarButton"+i).mouseout(function(){
            $("#ldheMenuBarLayer"+i).stop().animate({height:'41px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
    }
});

That doesn't work. Nothing happens and nothing appears in the console. But if I directly replace the i with a 1 in each of the $ function things it works.

I'm not new to programming but I'm new to JavaScript, so am I doing something obviously wrong? Thanks!

EDIT: When I say I replace the i with a 1, that's because the IDs are MenuBarButton1 and ldheMenuBarLayer1.

Your for loop only executes once... Why use a for loop? if i=1 and it only evaluates to i<2 then it only executes once. Is that the intent? — Josh
– Josh, Commented Oct 30, 2013 at 13:58
1. Try forcing the numerical variable i to a string: .. +String(i). 2. There is no need for a loop here: for (var i=1;i<2;i++) will only "loop" once, with i=1. — Jongware
– Jongware, Commented Oct 30, 2013 at 13:58
@SoylentGreen Because once I get it working with just one button it will be looping through around 5 or 6. — Clonkex
– Clonkex, Commented Oct 30, 2013 at 13:59
@Jongware numbers are implicitly made into strings when used in a + expression with a string. — Pointy
– Pointy, Commented Oct 30, 2013 at 13:59
Not really answering your question, but you could use $('[id^="MenuBarButton"]') to select all elements with an id attribute starting with "MenuBarButton", so you wouldn't need that loop at all. — pawel
– pawel, Commented Oct 30, 2013 at 14:05

lonesomeday · Accepted Answer · 2013-10-30 14:24:45Z

2

The basic problem you have is that there is only ever one value for i. That variable only exists once. The code inside the event handler points to the variable, not to its value when the event handler was created. So take your code that looks like this:

$("#ldheMenuBarLayer"+i).stop()...

Every time the event handler is run, i will be 2, because we've already gone all the way through the loop.

You need to use the value of i, not a reference to the variable. You do this by introducing a new scope with an anonymous, immediately-invoked function:

for(var i=1;i<=2;i++)
{
    (function(j) {
        $("#MenuBarButton"+j).mouseover(function(){
            $("#ldheMenuBarLayer"+j).stop().animate({height:'66px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
        $("#MenuBarButton"+j).mouseout(function(){
            $("#ldheMenuBarLayer"+j).stop().animate({height:'41px'},{queue:false, duration:600, easing: 'easeOutBounce'})
        });
    }(i))
}

Leaving aside all of this, it's worth mentioning that this isn't a very jQuery-ish way of going about things. The jQuery way might look like this:

var menuBarButtons = $('.menuBarButton').mouseover(function() {
    var idx = menuBarButtons.index(this);

    $('.ldheMenuBarLayer')
        .eq(idx)
        .stop()
        .animate(
             {
                 height: '66px'
             },
             {
                 queue: false,
                 duration: 600,
                 easing: 'easeOutBounce'
             }
         );
});

This code won't work (probably). It needs to be based on your markup and page structure. It might ultimately not be possible.

edited Oct 30, 2013 at 14:24

answered Oct 30, 2013 at 14:06

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Clonkex Over a year ago

"You probably want to do the loop for values of i 1 and 2. The code for this is" No, no, I completely understand how loops work and I only need the one loop currently. Once I have the first one working I'll increase it as necessary. Thanks though :)

Clonkex Over a year ago

Also, I can't change stuff in CSS or HTML so I can't search with a .

lonesomeday Over a year ago

@Clonkex Aha, that makes sense. I have removed that part of my post. You might look into complex selectors like [id^="MenuBarButton"], but this may not be very relevant to you now if you can get the slightly un-jQuery way to work to your satisfaction.

Clonkex Over a year ago

Is there a way to select multiple #'s using jQuery? That is, HTML ID's. Because they have to be unique, so is there a way of doing $("#MenuBarButton*")?

lonesomeday Over a year ago

@Clonkex Yes. You'll find it in my last comment ;-). See the jQuery API.

|

Collectives™ on Stack Overflow

How to concatenate variable and string in JavaScript?

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related