Databases
StackOverflow2013
Postsdbo
POProblems calling a javascript function with the output of a function
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblems calling a javascript function with the output of a function
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload