The problem in the code below is calling one function from another – the

Question

0

Asked: May 28, 20262026-05-28T07:46:07+00:00 2026-05-28T07:46:07+00:00

The problem in the code below is calling one function from another – the

0

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.

MONITORING CSS WITH FIREBUG: All CSS data vanishes from the DOM when the doarticle function is called.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=9" />
<meta name="viewport" content="user-scalable=no, width=768" />
<link rel="apple-touch-icon" href="images/guide_icon.png"/>
<title>The Guide</title>
<style type="text/css">
    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;
    }
</style>

Metas and CSS above

The article HTML rendering engine below…

<script type="text/javascript">
function doarticle (counter)
{
// document.body.innerHTML = "";
hhgaudio = 0;
strpos = 0;
hhgstring = "";

    if (hhgdata[counter][2].substring(strpos,(strpos+7)) === "<HHGML>")
    {
        strpos = 7;
        if (hhgdata[counter][2].substring(strpos,(strpos+8)) == "<BANNER>") // large banner at the top of the article
        {
            strpos = strpos +8;

            while (hhgdata[counter][2].substring(strpos,(strpos+9)) != "</BANNER>")
            {
                hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                strpos++;
            }
            strpos = strpos + 9;
            hhgstring = "<img id=\"banner\" src=\"" + imgpath + hhgstring + "\" style=\"vertical-align: top\"/>";
        }   
        hhgstring = "<img class=\"banner\" src=\"" + imgpath + "hhg_entry.jpg\" style=\"vertical-align: bottom\"/><br/>" + hhgstring;
        document.write(hhgstring);
        hhgstring = "<table frame=\"void\" border=\"0\" cellpadding=\"2\"><tr><td>";        
        hhgstring = hhgstring + "<div class=\"topic\">"+ (hhgdata[counter][0].toUpperCase()) + "<br/></div>"; // main article topic
        hhgstring = hhgstring + "<div class=\"title\">" + hhgdata[counter][1] + "</div>"; // main article title
        hhgstring = hhgstring + "<div class=\"summary\">" + (hhgdata[counter][3].toUpperCase()) + "</div>"; // article sub heading
        hhgstring = hhgstring + "</td></tr></table>"
        // if (hhgaudio == 0)
        // {
        //  hhgstring = hhgstring + "<audio autoplay=\"autoplay\"><source src=\"http://www.hyperspaces.co.uk/HHG/audio/HHG_noise.mp3\"></audio>"
        //  hhgaudio = 1;
        // }
        document.write(hhgstring);
        hhgstring = "";
        footernum = 0;

        while (hhgdata[counter][2].substring(strpos,(strpos+8)) != "</HHGML>")
        {

            if (hhgdata[counter][2].substring(strpos,(strpos+8)) == "<BANNER>") // large banner image at full page width
            {
                strpos = strpos +8;

                while (hhgdata[counter][2].substring(strpos,(strpos+9)) != "</BANNER>")
                {
                    hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                    strpos++;
                }
                strpos = strpos + 9;
                hhgstring = "<img class=\"imgborder\" src=\"" + imgpath + hhgstring +"\">";
                document.write(hhgstring);
                hhgstring = "";
            }

            if (hhgdata[counter][2].substring(strpos,(strpos+3)) == "<P>")
            {
                strpos = strpos + 3;
                hhgstring = hhgstring + "<div><table border=\"0\" cellpadding=\"10\"><tr><td>";

                while (hhgdata[counter][2].substring(strpos,(strpos+4)) != "</P>")
                {

                    if (hhgdata[counter][2].substring(strpos,(strpos+4)) == "<IL>")
                    {
                        strpos = strpos +4;
                        hhgstring = hhgstring + "<img class=\"imgpadded\" src=\"" + imgpath;

                        while (hhgdata[counter][2].substring(strpos,(strpos+5)) != "</IL>")
                        {
                            hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                            strpos ++;
                        }
                        strpos = strpos + 5;
                        hhgstring = hhgstring  +"\" align=\"left\">";
                    }

                    if (hhgdata[counter][2].substring(strpos,(strpos+4)) == "<IR>")
                    {
                        strpos = strpos +4;
                        hhgstring = hhgstring + "<img class=\"imgpadded\" src=\"" + imgpath;

                        while (hhgdata[counter][2].substring(strpos,(strpos+5)) != "</IR>")
                        {
                            hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                            strpos ++;
                        }
                        strpos = strpos + 5;
                        hhgstring = hhgstring  +"\" align=\"right\">";
                    }

                    if (hhgdata[counter][2].substring(strpos,(strpos+3)) == "<B>") // bold function
                    {
                        strpos = strpos +3;
                        hhgstring = hhgstring + "<b>";
                    }

                    if (hhgdata[counter][2].substring(strpos,(strpos+4)) == "</B>") // stop bold function
                    {
                        strpos = strpos +4;
                        hhgstring = hhgstring + "</b>";
                    }

                    if (hhgdata[counter][2].substring(strpos,(strpos+3)) == "<I>") // italic function
                    {
                        strpos = strpos +3;
                        hhgstring = hhgstring + "<i>";
                    }

                    if (hhgdata[counter][2].substring(strpos,(strpos+4)) == "</I>") // stop italic function
                    {
                        strpos = strpos +4;
                        hhgstring = hhgstring + "</i>";
                    }   

                    if (hhgdata[counter][2].substring(strpos,(strpos+12)) == "<BLOCKQUOTE>") // blockquote function
                    {
                        strpos = strpos +12;
                        hhgstring = hhgstring + "<blockquote>";

                        while (hhgdata[counter][2].substring(strpos,(strpos+13)) != "</BLOCKQUOTE>")
                        {
                            hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                            strpos ++;
                        }
                        strpos = strpos + 13;
                        hhgstring = hhgstring  +"</blockquote>";
                    }

                    if (hhgdata[counter][2].substring(strpos,(strpos+6)) == "<QBIG>") // large quote - big font
                    {
                        strpos = strpos +6;
                        hhgstring = hhgstring + "<br/><br/><div class=\"bigquote\">";

                        while (hhgdata[counter][2].substring(strpos,(strpos+7)) != "</QBIG>")
                        {
                            hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                            strpos ++;
                        }
                        strpos = strpos + 7;
                        hhgstring = hhgstring  +"</div>";

                        if (hhgdata[counter][2].substring(strpos,(strpos+4)) != "</P>") // add padding if mid-paragraph
                        {
                            hhgstring = "<br/>" + hhgstring;
                        }
                    }

                    if (hhgdata[counter][2].substring(strpos,(strpos+6)) == "<LIST>") // item list function
                    {
                        strpos = strpos +6;
                        hhgstring = hhgstring + "<ul>";

                        while (hhgdata[counter][2].substring(strpos,(strpos+7)) != "</LIST>")
                        {
                            if (hhgdata[counter][2].substring(strpos,(strpos+6)) == "<ITEM>")
                            {
                                strpos = strpos +6;
                                hhgstring = hhgstring + "<li>";

                                while (hhgdata[counter][2].substring(strpos,(strpos+7)) != "</ITEM>")
                                {
                                    hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                                    strpos ++;
                                }
                                strpos = strpos + 7;
                                hhgstring = hhgstring  +"</li>";    
                            }                           
                        }
                        strpos = strpos + 7;
                        hhgstring = hhgstring  +"</ul>";
                    }

                    if (hhgdata[counter][2].substring(strpos,(strpos+5)) == "<BR/>") // single line break function
                    {
                        strpos = strpos +5;
                        hhgstring = hhgstring + "<br/>";
                    }

                    if (hhgdata[counter][2].substring(strpos,(strpos+5)) == "<TAB>") // single line break function
                    {
                        strpos = strpos +5;
                        hhgstring = hhgstring + tab;
                    }

                    if (hhgdata[counter][2].substring(strpos,(strpos+10)) == "<FOOTNOTE>")
                    {
                        strpos = strpos +10;
                        ftext = footernum + 1;
                        fstring = "";
                        hhgstring = hhgstring + "<sup>" + ftext + "</sup>";

                        while (hhgdata[counter][2].substring(strpos,(strpos+11)) != "</FOOTNOTE>")
                        {
                            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)) != "<") // add any normal text
                    {
                        hhgstring = hhgstring + hhgdata[counter][2].substring(strpos,(strpos+1));
                        strpos ++;
                    }
                }
            } // end of pagagraph

            hhgstring = hhgstring +"</td></tr></table></div>";
            strpos = strpos + 4;
            document.write(hhgstring);
            hhgstring = "";

        } // end of article
        // document.body.innerHTML = hhgstring;
        if (footernum != 0)
        {
            document.write("<br/>");
            for (f=0; f<footernum; f++)
            {
                ftext = f+1;
                hhgstring = tab + tab + "<span class=\"footnum\">" + ftext + ":  ";
                hhgstring = hhgstring + "<span class=\"foottext\">" + hhgfooter[f] + "</span></span><br/>";
                document.write(hhgstring);
            }
        }   
        document.write("<br/><table border=\"0\" cellpadding=\"10\"><tr><td><span>Entry Ends.</span></tr></table><br/>");
    } // end of <HHGML>

} // end of records 

</script>

The menu listing function…

<script type="text/javascript">
function domenu (lastrecord)
{
    hhgstring = "<br/><br/><table border=\"0\" cellpadding=\"0\">";
    for (counter=1; counter<lastrecord; counter++)
    {
        recnum = lastrecord - counter;
        // hhgstring = hhgstring + "<tr><td><img id=\"imgpadded\" src=\"" + imgpath + hhgdata[recnum][4] + "\" align=\"left\"></td>";
        hhgstring = hhgstring + "<tr><td>" + hhgdata[recnum][4] + "</td>";
        hhgstring = hhgstring + "<td><span class=\"menutitle\" onclick=\"doarticle('" +recnum+ "');\">" + tab + hhgdata[recnum][1] + "<br/></span>";
        hhgstring = hhgstring + "<span class=\"menusummary\">" + tab + hhgdata[recnum][3] + "</span></td></tr>";
    }
    hhgstring = hhgstring + "</table>";
    document.write(hhgstring);
    return(hhgselect);
}
</script>

</head>

<body>

The database bit…

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

<script type="text/javascript">
    numrows = <?php echo $numrows; ?>;
    hhgdata = new Array(numrows);
    hhgfooter = new Array(10);
</script>

<?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"];
    ?>

Convert the PHP to Javascript vars…

    <script type="text/javascript">
        counter = <?php echo $counter; ?>; 
        hhgtitle = <?php echo '"'.$hhgtitle.'"'; ?>;
        hhgtopic = <?php echo '"'.$hhgtopic.'"'; ?>;
        hhgarticle = <?php echo '"'.$hhgarticle.'"'; ?>;
        hhgsummary = <?php echo '"'.$hhgsummary.'"'; ?>;
        hhgidimg = <?php echo '"'.$hhgidimg.'"'; ?>; 
        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;
    </script>

    <?php
    $counter++;
    }
mysql_close($con);
?>

call the menu script …

<script type="text/javascript">
imgpath = "images/";
tab = "&nbsp;&nbsp;&nbsp;&nbsp;";
hhgselect = domenu (numrows);
doarticle (hhgselect);
// document.body.innerHTML = ""; // clears the screen


</script>

</body>

</html>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-28T07:46:08+00:00

you should write:

hhgselect = dmenu(numrows);

and then

doarticle(hhgselect);

EDIT: or if you want to select at onclick why don’t you just call doarticle inside the onclick event?

EDIT 2:

try:

 ... hhgstring + "<td><span id=\"menutitle\" onclick=\"doarticle('" +recnum+ "');\">"...

EDIT 3:

<script type="text/javascript">
function domenu (lastrecord)
{
    hhgstring = "<br/><br/><table border=\"0\" cellpadding=\"0\">";
    for (counter=1; counter<lastrecord; counter++)
    {
        recnum = lastrecord - counter;
        // hhgstring = hhgstring + "<tr><td><img class=\"imgpadded\" src=\"" +     imgpath + hhgdata[recnum][4] + "\" align=\"left\"></td>";
        hhgstring = hhgstring + "<tr><td>" + hhgdata[recnum][4] + "</td>";
        hhgstring = hhgstring + "<td><span class=\"menutitle\" onclick=\"doarticle('" +recnum+ "');\">" + tab + hhgdata[recnum][1] + "<br/></span>";
        hhgstring = hhgstring + "<span class=\"menusummary\">" + tab + hhgdata[recnum][3] + "</span></td></tr>";
    }
hhgstring = hhgstring + "</table>";
document.write(hhgstring);
return(hhgselect);
}
</script>

</head>
<body>

<script type="text/javascript">
    imgpath = "images/"+imgmod+"/";
    tab = "&nbsp;&nbsp;&nbsp;&nbsp;";
    hhgselect = 0;
    domenu (numrows);
</script>

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

The problem in the code below is calling one function from another – the

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply