2012-01-23 94 views
0

下面的代碼中的問題是從另一個函數調用一個函數 - 函數domenu調用doarticle和相關的頁碼OK,但doarticle函數根本不用CSS格式化。如果我獨立地調用函數而不是一切正常,那只有當我從另一個調用一個問題出現時纔會調用它。使用函數輸出調用javascript函數的問題

使用FIREBUG監控CSS:當doarticle函數被調用時,所有CSS數據都從DOM消失。

<!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和CSS以上

下面的文章HTML渲染引擎...

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

菜單列表功能...

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

數據庫位.. 。

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

轉換的PHP爲Javascript瓦爾...

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

調用菜單腳本...

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

回答

1

你應該寫:

hhgselect = dmenu(numrows); 

然後

doarticle(hhgselect); 

編輯:或者如果你想在onc​​lick上選擇,爲什麼不直接在onclick事件中調用doarticle?

編輯2:

嘗試:

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

編輯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> 
+0

當我打電話做文章的點擊事件時,它失去了頁面上CSS的所有訪問 - 我不知道爲什麼...... – TJS101

+0

首先嚐試使用DOM createElement和appendChild它更有用,其次請驗證如果你在一個帶參數的字符串內使用正確的調用(提示你應該使用很多轉義字符) – khael

+0

嘗試了hhgselect = domenu(many);方法。什麼都沒發生。 onclicks是好的還是有更好的方法來改變一個變量? – TJS101

1

hhgselect不會出現在任何地方得到任何新的價值,因此,它是有道理的,它將保持爲0,並且您將始終看到相同的結果。

你認爲你在哪裏改變它的價值?這是一個全局變量,你從domenu()返回它,儘管它沒有被任何東西收集,正如我們已經說過的那樣。然而,不管它是否被收集,因爲你實際上並沒有修改它的價值,所以沒有理由被使用。

+0

做完了(見上面的凱爾的答案)。沒有快樂。 – TJS101

+0

編輯我的答案...希望有所幫助。 –