コードは、PHP を使用する方法で Perl と HTML を混在させようとしているように見えます。これは Perl では機能しません。
最初に Perl コードを修正してみました。これはファイルハンドルに出力されますが (省略しました)、動作する JavaScript コードは得られません。あなたが何をしたいのか理解できなかったので、私はそれを変更しませんでした。それについては後で詳しく説明します。
use strict;
use warnings;
# open of $indexfd filehandle goes here..
# print head of HTML page
print $indexfd <<HTML
<html>
<header>
<script type="text/javascript">
function hideit() {
var x1 = document.getElementsByTagName("ol").item(0);
var x = document.getElementsByTagName("ol");
for (var i = 0; i < x.length; i++)
x[i].style.display="none";
}
function showit() {
var x1 = document.getElementsByTagName("ol").item(0);
var x=document.getElementsByTagName("ol");
for (var i = 0; i < x.length; i++)
x[i].style.display="";
}
</script>
</header>
<body>
HTML
;
# If I see this correctly, %stats_data looks like this:
my %stats_data = (
'out1' => {
'key1' => 'val1',
'key2' => 'val2',
},
'out2' => {
'key1' => 'val1',
'key2' => 'val2',
},
);
my $out = 'out1'; # you need the $out from somewhere
# print buttons for each data thingy - you'll want to sort them probably
foreach my $key (sort keys %{$stats_data{$out}}) {
print $indexfd
qq~<input onclick="showit()" type="button" id="$key" value="showit"><br />~,
qq~<input onclick="hideit()" type="button" id="$key" value="hideit"><br/>~,
# Because $stats_data{$out} is a hash ref you need the -> operator here
qq~<ol id="$key"><li><b>$stats_data{$out}->{$key}</b></li></ol><br/>~;
}
print $indexfd qq~<p>more html...</p></body></html>~;
したがって、言及する価値のあることがいくつかあります。
print $indexfd ("<input onclick=\"showit()\" type=\"button\" id=\"<?perl echo $key; ?>\" value=\"showit\"><br><input onclick=\"hideit()\" type=\"button\" id=\"<?perl echo $key; ?>\" value=\"hideit\"><br><b><ol id=$key>$stats_data{$out}{$key}<ol id=$key> </b><br>");
あなたが使用したこのかなり長いコード行で<?perl echo $key; ?>は、php のように見えて動作しません。<ol id=$key>double-quotes を使用したため、 which worksも使用し"..."ました。Perl は "-delimited 文字列内の変数をそれらの値に置き換えます。PHP のようなものは必要ありません。HTML コード内のすべての二重引用符をエスケープする手間を省くために、qq-Operator を使用できます。詳細については、 perlopを参照してください。
%stats_dataコメントでデータ構造について説明しました。
HTML の大部分を印刷するために、HERE docsを使用しました。
では、JavaScript について話しましょう。
ボタンは ごと$keyに作成されますが、いずれかをクリックすると$stats_data{$out}{$key}、すべての が制御されます。
これは、hideit()とshowit()関数の設計方法によるものです。私はあなたが達成したいことを本当に確信していません。my%stats_dataを見ると、「out1」にいくつかのキーがあることがわかります。これにより、foreach-loop はこれらのキーごとに一連のボタンを出力できます。ボタンは両方とも ID と同じキーを持ち、ol. それは正しくありません。id-attribute は一意である必要があります。
さらに、あなたの html にはいくつかの基本的な問題がありましたが、これも自由に修正することができました。コンテナを開いた場合は、 の<ol id="foo">ように閉じる必要があります</ol>。はブロック レベルの要素であるため<ol>、インライン要素をその<b>外側に配置するのではなく、ol の<li>要素の内側に配置する必要があります (省略しました)。css ``style="font-weight: bold" を li 項目に割り当てるか、クラスを与える方がよいでしょう。
あなたが JavaScript で何をしようとしていたのか、最後に 1 つ推測してみましょう。テキストのいくつかの段落があり、それらをボタンで非表示にしたい場合は、ここでテストされていないコードのようにそれを行うことができます.
Javascript:
function toggle(id) {
if (document.getElementById(id).style.display == 'block' ) {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
HTML:
<div>
<input type="button" name="toggle1" id="toggle1" onclick="toggle('p1')" />
<p id="p1">Lorem ipsum dolor set ... foo a lot of text 1.</p>
<input type="button" name="toggle2" id="toggle2" onclick="toggle('p2')" />
<p id="p2">Lorem ipsum dolor set ... foo a lot of text 2.</p>
</div>
この場合、関数は段落が表示されているかどうかをチェックします。p 要素はブロック レベルの要素であるため、display-value を「none」または「block」に設定する必要があります。
さらにサポートが必要な場合は、スクリプトで使用するデータに関するより具体的な情報を投稿してください。
編集:
次のコードでは、JS 関数を変更して、両方とも id (キー) をパラメーターとして受け取ります。このキーに関連付けられたリストのみを表示または非表示にします。ボタンのIDを変更したので、同じではありません。また、ボタンとリストの各ペアの周りに div を追加して、何がどこに属しているかを明確にしました。
use strict;
use warnings;
# open of $indexfd filehandle goes here..
my $indexfd;
# print head of HTML page
print $indexfd <<HTML
<html>
<header>
<script type="text/javascript">
function hideit(key) {
document.getElementById(key).style.display = "none";
}
function showit(key) {
document.getElementById(key).style.display = "";
}
</script>
</header>
<body>
HTML
;
# If I see this correctly, %stats_data looks like this:
my %stats_data = (
'out1' => {
'key1' => 'val1',
'key2' => 'val2',
},
'out2' => {
'key1' => 'val1',
'key2' => 'val2',
},
);
my $out = 'out1'; # you need the $out from somewhere
foreach my $key (sort keys %{$stats_data{$out}}) {
print $indexfd
qq~<div id="div_$key">\n~, # Add a div around the $key-elements
qq~<input onclick="showit('$key')" type="button" id="btn_show_$key" value="showit">\n~,
qq~<input onclick="hideit('$key')" type="button" id="btn_show_$key" value="hideit"><br/>\n~,
qq~<ol id="$key"><li><b>$stats_data{$out}->{$key}</b></li></ol>\n~,
qq~</div>\n~;
}
print $indexfd qq~<p>more html...</p></body></html>~;