JQuery Setting variables when a website loads
<p>I have the following code... I'm trying to display the text in html on load:</p>

<pre><code>  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);
</code></pre>

<p>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?</p>

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

<p></li>
        </p>
