Cannot use defined javascript variable inside jquery's .html

Question

I kind of call a variable inside of a .html(); but it does not function properly.

var cap2 = "Here is a muddy truck.";
id = $(this).attr("id");
$("#caption").html("cap"+id); // this literally outputs "cap2" into my caption div

Obviously this is not the complete code but I think its enough for someone knowledgable to point me in the right direction.

I should also note when the last line looks like this

$("#caption").html(cap2); // this correctly outputs "Here is a muddy truck"

all is well but I need the numeric slot to be dynamic. Any thoughts?

Post more of the code; both HTML and JavaScript. So that we can help troubleshoot. — JoeFletch
– JoeFletch, Commented Oct 29, 2012 at 18:45
There are better ways to do this, like not using just a number for an ID, and if you have multiple strings, putting them in an array and referencing an array value instead of trying to eval a bunch of different variablenames etc. — adeneo
– adeneo, Commented Oct 29, 2012 at 18:49
More code probably isn't needed. $(this) is likely referring to an element accessed through jQuery and isn't relevant other than that he is getting its ID attribute. — Isaac Fife
– Isaac Fife, Commented Oct 29, 2012 at 18:50

techfoobar · Accepted Answer · 2012-10-29 18:46:05Z

4

If your cap2 variable is declared globally, you can use:

$("#caption").html(window["cap"+id]);

answered Oct 29, 2012 at 18:46

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

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

1 Comment

Scott Over a year ago

I ended up using this solution. This solution only worked after declaring my capX variables outside of my $(document).ready function. Thank you works as I needed.

Carlos Martinez T · Accepted Answer · 2012-10-29 18:45:04Z

0

You have to use the 'evil' eval function:

$("#caption").html(eval("cap"+id));

Evil because it can do all sort of dangerous things!

answered Oct 29, 2012 at 18:45

Carlos Martinez T

6,5481 gold badge36 silver badges40 bronze badges

1 Comment

techfoobar Over a year ago

If the OP has complete control over the value of id then this should be safe enough. But if there is any possibility of user entered data coming in the id part, avoid eval

gillyb · Accepted Answer · 2012-10-29 18:45:13Z

0

In javascript '+' is used to concatenate strings, and since the function receives on string parameter, you are sending it "cap2" as a string, and not the variable.
The eval() method will take the string you give it and run it as if it was code, hence, sending the 'cap2' variable to the .html() method.

$("#caption").html(eval("cap"+id));

answered Oct 29, 2012 at 18:45

gillyb

8,9308 gold badges55 silver badges80 bronze badges

Comments

Isaac Fife · Accepted Answer · 2012-10-29 18:46:24Z

0

The javascript function eval takes a string a evaluates it as a javascript variable, function, etc. Use .html(eval("cap"+id));

answered Oct 29, 2012 at 18:46

Isaac Fife

1,69013 silver badges15 bronze badges

Comments

adeneo · Accepted Answer · 2012-10-29 18:52:57Z

0

Just an example of how stuff like this would normally be handled:

<a href="#" id="a0"></a>
<a href="#" id="a1"></a>
<a href="#" id="a2"></a>
<a href="#" id="a3"></a>

$('a').on('click', function(e) {
    e.preventDefault();
    var caps = [
                "Here is a muddy truck.",
                "Here is a strange duck",
                "Here is the proper code",
                "Here's Johnny"
                ],
         id = this.id.replace('a','');

    $("#caption").html(caps[id]);
});

Preferrably declaring the array outside the click function, but it's just an example!

answered Oct 29, 2012 at 18:52

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Seimen · Accepted Answer · 2012-10-29 19:02:04Z

0

Adeneo's comment is probably the most helpful until now. If you have to reference variables with different numbers, make an array in the right order and call the index:

var caption = $('#caption'), // no use writing a variable on each action
    caps = [
        "Here is a muddy truck.",
        "another caption"
    ]; // fill with your captions

$(document).on('click', 'a', function() {
    caption.html(caps[this.id]);
});

edited Oct 29, 2012 at 19:02

answered Oct 29, 2012 at 18:53

Seimen

7,2942 gold badges30 silver badges42 bronze badges

Comments

Jason · Accepted Answer · 2012-10-29 19:20:30Z

0

Why not just stick your strings into a hash? That way you don't have to do any arithmetic on the id.

answered Oct 29, 2012 at 19:20

Jason

3,2151 gold badge25 silver badges25 bronze badges

Collectives™ on Stack Overflow

Cannot use defined javascript variable inside jquery's .html

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related