title: Problems calling a javascript function with the output of a function
body: <p>The problem in the code below is calling one function from another - the function domenu calls doarticle with the relevant page number OK but the doarticle function does not format with CSS at all. if I call the functions independently than everything works fine, it's only when I call one from the other that the problem appears.</p>
  
  <p>MONITORING CSS WITH FIREBUG: All CSS data vanishes from the DOM when the doarticle function is called.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
  &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="chrome=1,IE=9" /&gt;
  &lt;meta name="viewport" content="user-scalable=no, width=768" /&gt;
  &lt;link rel="apple-touch-icon" href="images/guide_icon.png"/&gt;
  &lt;title&gt;The Guide&lt;/title&gt;
  &lt;style type="text/css"&gt;
      body
      {
      width:768px;
      background: #FFFFFF;
      border-width: 0px;
      border-style: solid;
      border-color: #FFFFFF;
      padding: 0;
      margin: auto;
      position:relative;
      }
      div, span
      {
      font-family:Arial,Helvetica,sans-serif;
      font-size:140%;
      font-weight:normal;
      text-align:justify;
      color:#000000;
      }
      img.imgpadded
      {
      padding: 12px 7px 7px 7px ;
      }
      img.imgborder
      {
      width:764px;
      border-width: 2px;
      border-style: solid;
      border-color: #FFFFFF;
      }
      span.footnum
      {
      font-family:Arial,Helvetica,sans-serif;
      font-size:110%;
      font-weight:normal;
      color:#FF3300;
      }
      span.foottext
      {
      font-family:Arial,Helvetica,sans-serif;
      font-size:110%;
      font-weight:normal;
      color:#000000;
      }
      div.topic
      {
      font-family:Arial,Helvetica,sans-serif;
      font-size:100%;
      font-weight:bold;
      color:#6D8BE6;
      }
      div.title
      {
      font-family:Arial,Helvetica,sans-serif;
      font-size:250%;
      font-weight:bold;
      color:#000000;
      }
      div.summary
      {
      font-family:Arial,Helvetica,sans-serif;
      font-size:115%;
      font-weight:normal;
      color:#000000;
      }
      span.menutitle
      {
      font-family:Arial,Helvetica,sans-serif;
      font-size:100%;
      font-weight:bold;
      color:#6D8BE6;
      }
      span.menusummary
      {
      font-family:Arial,Helvetica,sans-serif;
      font-size:80%;
      font-weight:normal;
      color:#000000;
      }
      div.bigquote
      {
      font-family:Arial,Helvetica,sans-serif;
      font-size:210%;
      font-weight:normal;
      color:#000033;
      }
      img.banner
      {
      width: 768px;
      vertical-align: bottom;
      }
      sup
      {
      font-family:Arial,Helvetica,sans-serif;
      font-size:50%;
      font-weight:bold;
      color:#FF3300;
      }
      blockquote
      {
      font-family:Arial,Helvetica,sans-serif;
      font-size:100%;
      font-weight:normal;
      color:#000000;
      margin:20px 0 20px 20px;
      padding:10px 10px 10px;
      background-color:#eee;
      border-left:4px solid #6D8BE6;
      }
      ul
      {
      list-style-type:none;
      padding:10px;
      margin:0px;
      }
      li
      {
      background-image:url(images/blue_square.png);
      background-repeat:no-repeat;
      background-position:0px 5px; 
      padding-left:30px;
      padding-right:50px;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>Metas and CSS above </p>
  
  <p>The article HTML rendering engine below...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function doarticle (counter)
  {
  // document.body.innerHTML = "";
  hhgaudio = 0;
  strpos = 0;
  hhgstring = "";
  
      if (hhgdata[counter][2].substring(strpos,(strpos+7)) === "&lt;HHGML&gt;")
      {
          strpos = 7;
          if (hhgdata[counter][2].substring(strpos,(strpos+8)) == "&lt;BANNER&gt;") // large banner at the top of the article
          {
              strpos = strpos +8;
  
              while (hhgdata[counter][2].substring(strpos,(strpos+9)) != "&lt;/BANNER&gt;")
              {
                  hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                  strpos++;
              }
              strpos = strpos + 9;
              hhgstring = "&lt;img id=\"banner\" src=\"" + imgpath + hhgstring + "\" style=\"vertical-align: top\"/&gt;";
          }   
          hhgstring = "&lt;img class=\"banner\" src=\"" + imgpath + "hhg_entry.jpg\" style=\"vertical-align: bottom\"/&gt;&lt;br/&gt;" + hhgstring;
          document.write(hhgstring);
          hhgstring = "&lt;table frame=\"void\" border=\"0\" cellpadding=\"2\"&gt;&lt;tr&gt;&lt;td&gt;";        
          hhgstring = hhgstring + "&lt;div class=\"topic\"&gt;"+ (hhgdata[counter][0].toUpperCase()) + "&lt;br/&gt;&lt;/div&gt;"; // main article topic
          hhgstring = hhgstring + "&lt;div class=\"title\"&gt;" + hhgdata[counter][1] + "&lt;/div&gt;"; // main article title
          hhgstring = hhgstring + "&lt;div class=\"summary\"&gt;" + (hhgdata[counter][3].toUpperCase()) + "&lt;/div&gt;"; // article sub heading
          hhgstring = hhgstring + "&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;"
          // if (hhgaudio == 0)
          // {
          //  hhgstring = hhgstring + "&lt;audio autoplay=\"autoplay\"&gt;&lt;source src=\"http://www.hyperspaces.co.uk/HHG/audio/HHG_noise.mp3\"&gt;&lt;/audio&gt;"
          //  hhgaudio = 1;
          // }
          document.write(hhgstring);
          hhgstring = "";
          footernum = 0;
  
          while (hhgdata[counter][2].substring(strpos,(strpos+8)) != "&lt;/HHGML&gt;")
          {
  
              if (hhgdata[counter][2].substring(strpos,(strpos+8)) == "&lt;BANNER&gt;") // large banner image at full page width
              {
                  strpos = strpos +8;
  
                  while (hhgdata[counter][2].substring(strpos,(strpos+9)) != "&lt;/BANNER&gt;")
                  {
                      hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                      strpos++;
                  }
                  strpos = strpos + 9;
                  hhgstring = "&lt;img class=\"imgborder\" src=\"" + imgpath + hhgstring +"\"&gt;";
                  document.write(hhgstring);
                  hhgstring = "";
              }
  
              if (hhgdata[counter][2].substring(strpos,(strpos+3)) == "&lt;P&gt;")
              {
                  strpos = strpos + 3;
                  hhgstring = hhgstring + "&lt;div&gt;&lt;table border=\"0\" cellpadding=\"10\"&gt;&lt;tr&gt;&lt;td&gt;";
  
                  while (hhgdata[counter][2].substring(strpos,(strpos+4)) != "&lt;/P&gt;")
                  {
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+4)) == "&lt;IL&gt;")
                      {
                          strpos = strpos +4;
                          hhgstring = hhgstring + "&lt;img class=\"imgpadded\" src=\"" + imgpath;
  
                          while (hhgdata[counter][2].substring(strpos,(strpos+5)) != "&lt;/IL&gt;")
                          {
                              hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                              strpos ++;
                          }
                          strpos = strpos + 5;
                          hhgstring = hhgstring  +"\" align=\"left\"&gt;";
                      }
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+4)) == "&lt;IR&gt;")
                      {
                          strpos = strpos +4;
                          hhgstring = hhgstring + "&lt;img class=\"imgpadded\" src=\"" + imgpath;
  
                          while (hhgdata[counter][2].substring(strpos,(strpos+5)) != "&lt;/IR&gt;")
                          {
                              hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                              strpos ++;
                          }
                          strpos = strpos + 5;
                          hhgstring = hhgstring  +"\" align=\"right\"&gt;";
                      }
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+3)) == "&lt;B&gt;") // bold function
                      {
                          strpos = strpos +3;
                          hhgstring = hhgstring + "&lt;b&gt;";
                      }
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+4)) == "&lt;/B&gt;") // stop bold function
                      {
                          strpos = strpos +4;
                          hhgstring = hhgstring + "&lt;/b&gt;";
                      }
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+3)) == "&lt;I&gt;") // italic function
                      {
                          strpos = strpos +3;
                          hhgstring = hhgstring + "&lt;i&gt;";
                      }
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+4)) == "&lt;/I&gt;") // stop italic function
                      {
                          strpos = strpos +4;
                          hhgstring = hhgstring + "&lt;/i&gt;";
                      }   
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+12)) == "&lt;BLOCKQUOTE&gt;") // blockquote function
                      {
                          strpos = strpos +12;
                          hhgstring = hhgstring + "&lt;blockquote&gt;";
  
                          while (hhgdata[counter][2].substring(strpos,(strpos+13)) != "&lt;/BLOCKQUOTE&gt;")
                          {
                              hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                              strpos ++;
                          }
                          strpos = strpos + 13;
                          hhgstring = hhgstring  +"&lt;/blockquote&gt;";
                      }
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+6)) == "&lt;QBIG&gt;") // large quote - big font
                      {
                          strpos = strpos +6;
                          hhgstring = hhgstring + "&lt;br/&gt;&lt;br/&gt;&lt;div class=\"bigquote\"&gt;";
  
                          while (hhgdata[counter][2].substring(strpos,(strpos+7)) != "&lt;/QBIG&gt;")
                          {
                              hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                              strpos ++;
                          }
                          strpos = strpos + 7;
                          hhgstring = hhgstring  +"&lt;/div&gt;";
  
                          if (hhgdata[counter][2].substring(strpos,(strpos+4)) != "&lt;/P&gt;") // add padding if mid-paragraph
                          {
                              hhgstring = "&lt;br/&gt;" + hhgstring;
                          }
                      }
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+6)) == "&lt;LIST&gt;") // item list function
                      {
                          strpos = strpos +6;
                          hhgstring = hhgstring + "&lt;ul&gt;";
  
                          while (hhgdata[counter][2].substring(strpos,(strpos+7)) != "&lt;/LIST&gt;")
                          {
                              if (hhgdata[counter][2].substring(strpos,(strpos+6)) == "&lt;ITEM&gt;")
                              {
                                  strpos = strpos +6;
                                  hhgstring = hhgstring + "&lt;li&gt;";
  
                                  while (hhgdata[counter][2].substring(strpos,(strpos+7)) != "&lt;/ITEM&gt;")
                                  {
                                      hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                                      strpos ++;
                                  }
                                  strpos = strpos + 7;
                                  hhgstring = hhgstring  +"&lt;/li&gt;";    
                              }                           
                          }
                          strpos = strpos + 7;
                          hhgstring = hhgstring  +"&lt;/ul&gt;";
                      }
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+5)) == "&lt;BR/&gt;") // single line break function
                      {
                          strpos = strpos +5;
                          hhgstring = hhgstring + "&lt;br/&gt;";
                      }
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+5)) == "&lt;TAB&gt;") // single line break function
                      {
                          strpos = strpos +5;
                          hhgstring = hhgstring + tab;
                      }
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+10)) == "&lt;FOOTNOTE&gt;")
                      {
                          strpos = strpos +10;
                          ftext = footernum + 1;
                          fstring = "";
                          hhgstring = hhgstring + "&lt;sup&gt;" + ftext + "&lt;/sup&gt;";
  
                          while (hhgdata[counter][2].substring(strpos,(strpos+11)) != "&lt;/FOOTNOTE&gt;")
                          {
                              fstring = fstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                              strpos ++;
                          }
                          strpos = strpos + 11;
                          hhgfooter[footernum] = fstring;
                          footernum ++;
                      }
  
                      if (hhgdata[counter][2].substring(strpos,(strpos+1)) != "&lt;") // add any normal text
                      {
                          hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                          strpos ++;
                      }
                  }
              } // end of pagagraph
  
              hhgstring = hhgstring +"&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/div&gt;";
              strpos = strpos + 4;
              document.write(hhgstring);
              hhgstring = "";
  
          } // end of article
          // document.body.innerHTML = hhgstring;
          if (footernum != 0)
          {
              document.write("&lt;br/&gt;");
              for (f=0; f&lt;footernum; f++)
              {
                  ftext = f+1;
                  hhgstring = tab + tab + "&lt;span class=\"footnum\"&gt;" + ftext + ":  ";
                  hhgstring = hhgstring + "&lt;span class=\"foottext\"&gt;" + hhgfooter[f] + "&lt;/span&gt;&lt;/span&gt;&lt;br/&gt;";
                  document.write(hhgstring);
              }
          }   
          document.write("&lt;br/&gt;&lt;table border=\"0\" cellpadding=\"10\"&gt;&lt;tr&gt;&lt;td&gt;&lt;span&gt;Entry Ends.&lt;/span&gt;&lt;/tr&gt;&lt;/table&gt;&lt;br/&gt;");
      } // end of &lt;HHGML&gt;
  
  } // end of records 
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The menu listing function...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function domenu (lastrecord)
  {
      hhgstring = "&lt;br/&gt;&lt;br/&gt;&lt;table border=\"0\" cellpadding=\"0\"&gt;";
      for (counter=1; counter&lt;lastrecord; counter++)
      {
          recnum = lastrecord - counter;
          // hhgstring = hhgstring + "&lt;tr&gt;&lt;td&gt;&lt;img id=\"imgpadded\" src=\"" + imgpath + hhgdata[recnum][4] + "\" align=\"left\"&gt;&lt;/td&gt;";
          hhgstring = hhgstring + "&lt;tr&gt;&lt;td&gt;" + hhgdata[recnum][4] + "&lt;/td&gt;";
          hhgstring = hhgstring + "&lt;td&gt;&lt;span class=\"menutitle\" onclick=\"doarticle('" +recnum+ "');\"&gt;" + tab + hhgdata[recnum][1] + "&lt;br/&gt;&lt;/span&gt;";
          hhgstring = hhgstring + "&lt;span class=\"menusummary\"&gt;" + tab + hhgdata[recnum][3] + "&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;";
      }
      hhgstring = hhgstring + "&lt;/table&gt;";
      document.write(hhgstring);
      return(hhgselect);
  }
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  </code></pre>
  
  <p>The database bit...</p>
  
  <pre><code>&lt;?php
      $con = mysql_connect("XXXX","XXXX","XXXX");
      mysql_select_db("HHG", $con);
      if (!$con)
      {
          die('Could not connect: ' . mysql_error());
      }
      else 
      {
          $result = mysql_query("SELECT * FROM articles", $con);
          $numrows = mysql_num_rows($result);
      }
  ?&gt; 
  
  &lt;script type="text/javascript"&gt;
      numrows = &lt;?php echo $numrows; ?&gt;;
      hhgdata = new Array(numrows);
      hhgfooter = new Array(10);
  &lt;/script&gt;
  
  &lt;?php
      $counter = 0;
      while ($row = mysql_fetch_assoc($result))
      {
          $hhgtitle = $row["hhgtitle"];
          $hhgtopic = $row["hhgtopic"];
          $hhgarticle = mysql_real_escape_string($row["hhgarticle"]);
          $hhgsummary = mysql_real_escape_string($row["hhgsummary"]);
          $hhgidimg = $row["hhgidimg"];
      ?&gt;
  </code></pre>
  
  <p>Convert the PHP to Javascript vars...</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          counter = &lt;?php echo $counter; ?&gt;; 
          hhgtitle = &lt;?php echo '"'.$hhgtitle.'"'; ?&gt;;
          hhgtopic = &lt;?php echo '"'.$hhgtopic.'"'; ?&gt;;
          hhgarticle = &lt;?php echo '"'.$hhgarticle.'"'; ?&gt;;
          hhgsummary = &lt;?php echo '"'.$hhgsummary.'"'; ?&gt;;
          hhgidimg = &lt;?php echo '"'.$hhgidimg.'"'; ?&gt;; 
          hhgdata[counter] = new Array(5);
          hhgdata[counter][0]= hhgtopic;
          hhgdata[counter][1]= hhgtitle;
          hhgdata[counter][2]= hhgarticle
          hhgdata[counter][3]= hhgsummary;
          hhgdata[counter][4]= hhgidimg;
      &lt;/script&gt;
  
      &lt;?php
      $counter++;
      }
  mysql_close($con);
  ?&gt;
  </code></pre>
  
  <p>call the menu script ...</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  imgpath = "images/";
  tab = "&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;";
  hhgselect = domenu (numrows);
  doarticle (hhgselect);
  // document.body.innerHTML = ""; // clears the screen
  
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>