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

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>

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
});

Put your code inside

$(document).ready(function() {
   //Code here
});

The code inside will be executed when the DOM is fully loaded

You can't use jQuery with FBJS. You must use document.getElementById(id).setTextValue().

If you want to use jQuery, you will need to switch to an iframe Canvas.

There is no method called setTextValue, use html or text method to set any content inside the dom element. Try this

$(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);

});