Problems calling a javascript function with the output of a function

Question

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>

khael · Accepted Answer · 2012-01-24 00:41:49Z

1

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>

edited Jan 24, 2012 at 0:41

answered Jan 24, 2012 at 0:01

khael

2,6101 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

TJS101 Over a year ago

when I call do article in the on click event it loses all access to the CSS on the page - I have no idea why....

khael Over a year ago

first try to use DOM createElement and appendChild it is more useful, second please verify if you use the correct calling in an inline call inside a string with parameter ( hint you should use a lot of escaped characters )

TJS101 Over a year ago

tried the hhgselect = domenu(numerous); method. Nothing happens. Are the onclicks ok or is there a better way to change a variable?

TJS101 Over a year ago

"<span id=\"menutitle\" onclick=\"hhgselect = " + recnum + "\";>" is escaped properly. I just triple checked. THanks.

TJS101 Over a year ago

OK Khael - tried the new onclick. the event fires but the new function cannot see any CSS ids or body formatting (maybe because it was fired within a table?).

|

Yevgeny Simkin · Accepted Answer · 2012-01-24 00:30:00Z

1

hhgselect doesn't appear to be getting any new value anywhere, so, it makes sense that it will remain 0 and you'll always see the same result.

Where do you *think you're altering its value? It's a global variable and you're returning it from domenu(), although it's not being collected by anything, as we're already said. However, whether it's collected or not, since you're not actually modifying its value, it has no reason to be of use.

edited Jan 24, 2012 at 0:30

answered Jan 24, 2012 at 0:03

Yevgeny Simkin

28.6k41 gold badges145 silver badges243 bronze badges

1 Comment

TJS101 Over a year ago

Done that (see Khael's answer above). No joy.

Collectives™ on Stack Overflow

Problems calling a javascript function with the output of a function

2 Answers 2

19 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

19 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related