1


0

Perl CGI&JavaScript |オプションのトラブルを選択

次のコードが機能しない理由を突き止めるのに苦労しています。

test.cgi:

#!/usr/bin/perl -w

use CGI;

$cgi = new CGI;
$cgi->autoEscape(undef);
        %ptype = ("0","","1","Pennsylvania","2","New York","3","Ohio");
print   $cgi->header('text/html'),
        $cgi->start_html(-title=>'Test',-script=>[{-type=>'javascript',-src =>'/scripts/test.js'}]),
        $cgi->start_form(-method=>'GET',id=>'frmMain',-name=>'frmMain',-enctype=>'multipart/form-data'),
        $cgi->popup_menu(-style=>'width:200',name=>'ProblemType',-values=>\%ptype,-onChange=>'PopulateSType()',-default=>'0'),
        $cgi->popup_menu(-style=>'width:200',name=>'SubProblemType',-values=>''),
        $cgi->end_form,
        $cgi->end_html();

test.js:

function PopulateSType() {

   var ProblemList = document.frmMain.ProblemType;
   ClearOptions(document.frmMain.SubProblemType);

   if (ProblemList[ProblemType.selectedIndex].value == "1") {
      AddToOptionList(document.frmMain.SubProblemType, "0", "");
      AddToOptionList(document.frmMain.SubProblemType, "1", "Pittsburgh");
      AddToOptionList(document.frmMain.SubProblemType, "2", "Philadelphia");
      AddToOptionList(document.frmMain.SubProblemType, "3", "Harrisburg");
   }
   if (ProblemList[ProblemType.selectedIndex].value == "2") {
      AddToOptionList(document.frmMain.SubProblemType, "0", "");
      AddToOptionList(document.frmMain.SubProblemType, "1", "New York");
      AddToOptionList(document.frmMain.SubProblemType, "2", "Buffalo");
      AddToOptionList(document.frmMain.SubProblemType, "3", "Middletown");
   }
   if (ProblemList[ProblemType.selectedIndex].value == "3") {
      AddToOptionList(document.frmMain.SubProblemType, "1", "Cleveland");
      AddToOptionList(document.frmMain.SubProblemType, "2", "Cincinatti");
      AddToOptionList(document.frmMain.SubProblemType, "3", "Akron");
   }
}

function ClearOptions(OptionList) {
   for (x = OptionList.length; x >= 0; x = x - 1) {
      OptionList[x] = null;
   }
}

function AddToOptionList(OptionList, OptionValue, OptionText) {
   OptionList[OptionList.length] = new Option(OptionText, OptionValue);
}

サンプルソース出力:

Process Alarm



Pennsylvania
Ohio

New York

すべてが正常に機能するように見えますが、ページをロードしても、2番目の選択オプションボタンで何も起こりません。 ページの読み込み時に幅スタイルが適用されると、ヒットまたはミスのように見えます。 test.jsの上部で `window.onload = load;`を試しました。 間違っているかもしれないと私が見ている唯一のことは、perlがonChangeをonchangeとしてフォーマットしていることです。

Javaは通常のHTMLでは問題なく動作しますが、perlでこれを実装しようとすると問題が発生するようです。 http://www.petenelson.com/aspwatch/Option%20List%20Examples.htm [ここ]の例を使用しています

1 Answer


1


</code></pre>

<p>It should be <code>type="text/javascript"</code>, the MIME media type for JS that browsers support. <code>type="javascript"</code> on its own won't be recognised. (<code>language="javascript"</code> is obsolete.)</p>

<pre><code>style="width:200"
</code></pre>

<p>should be <code>200px</code>.</p>

<pre><code>for (x = OptionList.length; x >= 0; x = x - 1) {
   OptionList[x] = null;
}
</code></pre>

<p>Not sure <code>null</code> is guaranteed to work. The traditional quick idiom is:</p>

<pre><code>OptionList.length= 0;
</code></pre>