JQuery Setting variables when a website loads

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" onc开发者_开发百科lick="rotator.loadIndex(0); rotator.stop()">
            <p id="hero_1_text_under_photo">
        </li>
        <li class="topic tab2" onclick="rotator.loadIndex(1); rotator.stop()">
  <p id="hero_2_text_under_photo">
        </li>
        <li class="topic tab3" onclick="rotator.loadIndex(2); rotator.stop()">
              <p id="hero_3_text_under_photo">
        </li>
        <li class="topic tab4" onclick="rotator.loadIndex(3); rotator.stop()">
              <p id="hero_4_text_under_photo">

---

You are trying to set the "tags" of hero_1_text_under_photo, hero_2_text_under_photo, etc. Perhaps you are trying to set them by their IDs?

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

---

Ouh, it's actually first time I see a method setTextValue in jQuery. Does it really has one? Also as Joseph mentioned your jQuery selector is wrong.

As hero_1_text_under_photo is a <p></p> then to insert some text in it use the text method.

$('#hero_1_text_under_photo').text(hero_1_text_under_photo);

By the way, you must close your <p id="hero_1_text_under_photo"> tag with an </p>.