CODEWITHSUNDEEP
jquery
Josh Mountain
Josh Mountain

Reputation: 1950

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

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()?

Upvotes: 0

Views: 1497

Answers (2)

gbtimmon
gbtimmon

Reputation: 4322

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/

Upvotes: 3

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

You have several problems:

  1. You don't declare an array like that in JavaScript. Declare one variable named finish. Read more about arrays on MDN's article.
  2. 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.

  3. 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/

Upvotes: 1

Related Questions