Jquery showing variable name instead of value

Question

I have a snippet of code which I want to use to display a certain description in the div #selectedRadio.

However, instead of showing the variable value (e.g. "Example description 1"), it is showing the variable name (e.g. "desc1").

var desc1 = 'Example description1';
var desc2 = 'Example description2';

$('input[name="expenseCat"]').change(function() {
    for (var i = 1; i <= 2; i++) {
        if (this.value == i) {
            $('#selectedRadio').text(['desc'+i]);
        }
    }
});

If I use this instead, it works fine (but obviously it's not dynamic, and so it's basically useless):

$('#selectedRadio').text(desc1);

What am I doing wrong? How can I get it to display the value of the variable instead of its name?

Thanks in advance!

Use an array `desc = ['Example description1', ...]`; instead of several variables. — Denys Séguret, Sep 10 '15 at 15:16
That entire inner loop and comparison construct appears to be unnecessary, why not ```$('#selectedRadio").text(['desc' + this.value]) ``` ( this doesn't address the issue you're asking about, but that code looks a bit silly ) — Coburn Berry, Sep 10 '15 at 15:24
See [Convert string to variable name in Javascript](http://stackoverflow.com/questions/5613834/convert-string-to-variable-name-in-javascript) — Popnoodles, Sep 10 '15 at 15:25

Popnoodles · Answer 1 · 2015-09-10T15:36:50.990

3

Not the best way to do things but eval will work.

$('#selectedRadio').text(eval('desc'+i));

Ideally you would use an array

var desc = ['Example description1', 'Example description2'];

$('input[name="expenseCat"]').change(function() {
    for (var i = 1; i <= 2; i++) {
        if (this.value == i) {
            $('#selectedRadio').text(desc[i-1]); // -1 because zero based
        }
    }
});

Your code is also iterating where unnecessary. Just use this this.value

var desc = ['Example description1', 'Example description2'];

$('input[name="expenseCat"]').change(function() {
    $('#selectedRadio').text(desc[this.value-1]); // -1 because zero based
});

edited Sep 10 '15 at 15:36

answered Sep 10 '15 at 15:24

Popnoodles

28,090
2
45
53

1

I don't know why you've been downvoted, even though your eval is not a secure method. Still it works in this case. However, I agree more with the array solution. Upvoted you are :D – r4phG Sep 10 '15 at 15:30
Thanks for the replies. Got to clean up my code a bit too now! I got around by using eval for now, however I'll look to transform my code to using an array instead. Out of interest, what do you mean when you say that eval is not a secure method? – Andreas BB Sep 11 '15 at 10:46

score 0 · Answer 2 · answered Sep 10 '15 at 15:33

0

Like Denys said in the comment to your question: use an array.

A quick and dirty example based on the code of your question:

var desc = ['Example description1', 'Example description2'];

$('input[name="expenseCat"]').change(function () {
    $("#selectedRadio").val(desc[$(this).val()]);
});

answered Sep 10 '15 at 15:33

Bitbored

473
5
16

`$(this).val()` is more expensive than `this.value` – Popnoodles Sep 10 '15 at 15:37
True, but I guess it is at least more permanent than looping over the entire `desc` array.It might be a good idea to check the value to be a number before using it to index an array to... – Bitbored Sep 11 '15 at 15:11

score 0 · Answer 3 · answered Sep 10 '15 at 15:35

See below code what you can do with arrays;

HTML:

<input name="expenseCat"/>
<div id="selectedRadio"></div>

jQuery:

var arr = ["Example description1","Example description2"];

    $('input[name="expenseCat"]').change(function() {
       $.each( arr, function( key, value ) { 
           var oldval =  $('#selectedRadio').text();
           $('#selectedRadio').text( oldval+"\n" + value);
           $('#selectedRadio').html($('#selectedRadio').text().replace(/\n/g, '<br />'));
        });      

    });

DEMO

score 0 · Answer 4 · answered Sep 10 '15 at 15:42

0

Please replace this code:

    $('#selectedRadio').text(['desc'+i]);

With this line:

    $('#selectedRadio').text(eval('desc'+i));

answered Sep 10 '15 at 15:42

Atif Tariq

2,650
27
34

Jquery showing variable name instead of value

4 Answers4