How can I use .text() to display an array value?

Question

I am trying to change some text based on a radio button selection using jQuery but I can't seem to get it working. This is my code as it stands:

HTML

<input type="radio" name="finish_id" id="1" value="1" checked />
<label for="1" id="veteran"></label>

<input type="radio" name="finish_id" id="2" value="2" />
<label for="2" id="elite"></label>

<input type="radio" name="finish_id" id="3" value="3" />
<label for="3" id="legendary"></label>

<span id="finish_name"></span>

JS

// Set variables
    var finish[] = "something";
    var finish[] = "something else";
    var finish[] = "another thing";

// Change finish name based on radio selection
    $(document).ready(function() {
        $("input[name='finish_id']").change(function() {
            $('#finish_name').text( finish[$(this).val()] );
        }).change();
    });

I'm probably way off with the array number being $(this).val(), I don't know if you can select it that way, but even if I set it to $('#finish_name').text( finish[1] ); I get an unexpected token [ error. How can I use the array value for .text()?

to add element to an array use push. finish.push('your var'); and off course keep your firebug/chrome developer tool enable when writing javascript code. :) — HamidRaza
– HamidRaza, Commented Feb 26, 2013 at 18:32
I added a html5 style implementation that is going to be cleaner to my answer if your interested. — gbtimmon
– gbtimmon, Commented Feb 26, 2013 at 18:46

gbtimmon · Accepted Answer · 2013-02-26 18:56:17Z

3

Thats not how you declare a array in javascript

try

var finish = ["something",
              "something else",
              "another thing"];   


// Change finish name based on radio selection
$(document).ready(function() {
    $("input[name='finish_id']").change(function() {
        $('#finish_name').text( finish[$(this).val()] );
    }).change();
});

Or to make it more scalable /html5-esque....

<input type="radio" name="finish_id" value="1" data-message='something' onchange="javasript:$('#finish_name').text( finish[$(this).val()] )">
<input type="radio" name="finish_id" value="2" data-message='something else' onchange="javasript:$('#finish_name').text( finish[$(this).val()] )">
<input type="radio" name="finish_id" value="3" data-message='another thing' onchange="javasript:$('#finish_name').text( finish[$(this).val()] )">
<span id="finish_name"></span>

http://jsfiddle.net/erPQA/3/

edited Feb 26, 2013 at 18:56

answered Feb 26, 2013 at 18:30

gbtimmon

4,3721 gold badge24 silver badges36 bronze badges

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

Comments

Andrew Whitaker · Accepted Answer · 2013-02-26 18:43:16Z

1

You have several problems:

You don't declare an array like that in JavaScript. Declare one variable named finish. Read more about arrays on MDN's article.
You have an off-by-one error. In JavaScript, arrays indexes are 0-based, meaning the first index is 0. You can fix this by subtracting one from the radio button value inside of your change event.
The way you're manually triggering the change event is causing the event to fire for the last radio button. You can use the .first method to select the first radio button and trigger the change event only on that element.

Update: Even better, you could use .filter and only call change on the checked radio button (updated below)

// Set variables
var finish = ['something', 'something else', 'another thing'];

// Change finish name based on radio selection
$(document).ready(function () {
    $("input[name='finish_id']").change(function () {
        $('#finish_name').text(finish[$(this).val()-1]);
    }).filter(":checked").change();
});

Example: http://jsfiddle.net/YnBa3/1/

edited Feb 26, 2013 at 18:43

answered Feb 26, 2013 at 18:32

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

2 Comments

Josh Mountain Over a year ago

Thank you, as you can tell I'm relatively new to Javascript.. You and @gbtimmon were both a great help :)

Andrew Whitaker Over a year ago

@JoshMountain: No problem! Everyone was new once :) Glad I could help.

Collectives™ on Stack Overflow

How can I use .text() to display an array value?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related