Question

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">
        </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">

Answer 1

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