0
以下のコードの問題は、別の関数から1つの関数を呼び出すことです。関数domenuは関連するページ番号でdoarticleを呼び出しますが、doarticle関数はCSSでフォーマットしません。私がすべての関数が正常に機能するかどうかを独立して呼び出すと、問題が発生したときに関数を呼び出すときだけです。関数の出力でjavacript関数を呼び出すときの問題
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>
と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"];
?>
JavaScriptにPHPは、あなたが書く必要があります...
<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 = " ";
hhgselect = domenu (numrows);
doarticle (hhgselect);
// document.body.innerHTML = ""; // clears the screen
</script>
</body>
</html>
私がクリックイベントで記事を呼び出すと、ページ上のCSSへのすべてのアクセスが失われます - 理由はわかりません。 – TJS101
最初にDOM createElementとappendChildを使用してみてください。パラメータを持つ文字列の中でインライン呼び出しで正しい呼び出しを使用する場合（ヒントでは多くのエスケープ文字を使用する必要があります） – khael
はhhgselect = domenu（多数）を試しました。方法。何も起こりません。 onclicksはOKですか、それとも変数を変更する良い方法がありますか？ – TJS101