Facebook Javascript How do you use JQuery to show the variable on load

Question

How do I do the following trivial thing, using FBJS....

I have the following code... I'm trying to display the text in html on load:

  var hero_text_under_photo = 'Hero 1'
  var hero_2_text_under_photo = 'Hero 2'
  var hero_3_text_under_photo = 'Hero 3'
  var hero_4_text_under_photo = 'Hero 4'

  console.log(hero_text_under_photo);
    $('#hero_1_text_under_photo').setTextValue(hero_text_under_photo);
    $('#hero_2_text_under_photo').setTextValue(hero_2_text_under_photo);
    $('#hero_3_text_under_photo').setTextValue(hero_3_text_under_photo);
    $('#hero_4_text_under_photo').setTextValue(hero_4_text_under_photo);

I can read the variables with console.log, but I don't see the values set until I click them. How can I fix this?

<div id="whatsNew">
    <h2>What's New</h2>
    <ul id="topics" class="topics">
        <li class="topic tab1 topicSelected" onclick="rotator.loadIndex(0); rotator.stop()">
            <p id="hero_1_text_under_photo"></p>
        </li>
        <li class="topic tab2" onclick="rotator.loadIndex(1); rotator.stop()">
  <p id="hero_2_text_under_photo"></p>
        </li>
        <li class="topic tab3" onclick="rotator.loadIndex(2); rotator.stop()">
              <p id="hero_3_text_under_photo"></p>
        </li>
        <li class="topic tab4" onclick="rotator.loadIndex(3); rotator.stop()">
              <p id="hero_4_text_under_photo"></p>

Answer 1

First, you should wrap your javascript code so that it gets executed on document ready. You can do this with:

$(function() { //define a function to execute on document ready
 //your code here
});

The next step is to use the correct jQuery method. setTextValue is not a method as far as I am aware; instead use text(), so the final code would be:

$(function(){
  var hero_text_under_photo = 'Hero 1'
  var hero_2_text_under_photo = 'Hero 2'
  var hero_3_text_under_photo = 'Hero 3'
  var hero_4_text_under_photo = 'Hero 4'

  console.log(hero_text_under_photo);
    $('#hero_1_text_under_photo').text(hero_text_under_photo);
    $('#hero_2_text_under_photo').text(hero_2_text_under_photo);
    $('#hero_3_text_under_photo').text(hero_3_text_under_photo);
    $('#hero_4_text_under_photo').text(hero_4_text_under_photo);
});

You can see a fiddle of this here.

Also, it's worth noting that you should avoid using onclick attributes to attach events to DOM nodes. Instead use jQuery to programmatically hook-up events; this keeps your HTML much cleaner, and follows the paradigm of unobtrusive javascript. You can do it like this:

$("#your_selector").click(function() {
    //your event handling code here
});