0

これはStackOverflowに関する私の最初の質問です。私は、Javascriptを初めて使用し（コーディングの感覚をつかむためにPythonを学んでいます）、簡単なWebアプリを試して、自分の翻訳がいかに簡単かを確認したいと思いました。 PythonからJavascriptへの知識。

基本的に、アプリはあなたの好きな果物などが季節になったことを知らせます。そのため、あるページの「fruitpicker.html」にチェックボックスのリストがあり、別の「seasonalguide.html」に対応する画像があります（画像は、果物の季節が影付きになっているカレンダーの写真などです）。

チェックボックスの状態を保持するCookieと、対応するチェックボックスの状態に応じて画像の表示を切り替える外部JSがあります。他の誰かがウェブ上で使用していたCookieのほとんどはうまく機能しますが、JSの画像が問題を引き起こしています。

あるべきだと思うものを書きましたが、うまくいきませんでした。いくらいじっても何も起こりません。

それは本当にばかげたものだと確信していますが、とにかく、ここにコードがあります...

JSに対する壊れた画像：

function toggleVisibility(checkId, imageId) {
    var imgEl = document.getElementById(imageId);
    var checkEl = document.getElementById(checkId);
    if (checkEl.checked) {
        imgEl.style.visibility="hidden";
        imgEl.style.display="none";
    }
    else {
        imgEl.style.visibility="visible";
        imgEl.style.display="inline-block";
    }
  }

ちなみに、行：var checkEl = document.getElementById(checkId); が削除された場合、コードは機能しますが、画像の状態は持続しません。これは私が得た限りです。

Fruitpicker.htmlのチェックボックスのいくつか：

<html>
<head>
<title>Fruit Picker</title>

<script type="text/javascript" src="cookie.js"></script>
</head>
<body onload="restorePersistedCheckBoxes();">

<label for=       "chklogo">Braeburn</label>
<input type=      "checkbox" 
       id=        "chkBraeburn"
             onChange=  "toggleVisibility('braeburnItem'); 
                   toggleVisibility('braeburnSeason');
                   persistCheckBox(this);" /><br>                   

<label for=       "chklogo">Fuji</label>
<input type=      "checkbox" 
       id=        "chkFuji" 
       onChange=  "toggleVisibility('fujiItem'); 
                   toggleVisibility('fujiSeason');
                   persistCheckBox(this);" /><br>

<label for=       "chklogo">Golden Delicious</label>
<input type=      "checkbox" 
       id=        "chkgolldenDelicious" 
       onChange=  "toggleVisibility('goldenDeliciousItem'); 
                   toggleVisibility('goldenDeliciousSeason');
                   persistCheckBox(this);" /><br>

<label for=       "chklogo">Granny Smith</label>
<input type=      "checkbox" 
       id=        "chkGrannySmith" 
       onChange=  "toggleVisibility('grannySmithItem'); 
                   toggleVisibility('grannySmithSeason');
                   persistCheckBox(this);"/><br/>
</body>
</html>

そしてここに季節ガイドページがあります：

<html>
<head>
    <script type="text/javascript" src="cookie.js"></script>
    <script type="text/javascript" src="imageVisibility.js"></script>
</head>
<body>
<img    id="imgGuide" 
        src="Images/Calendar/calendarHeader.png"
        align="left"/>

<img    id="braeburnItem" 
        src="Images/Produce/Fruit/BraeburnApple.png" 
        style="float:left; display:none;" />
<img    id="braeburnSeason" 
        float="top" 
        src="Images/InSeason/InSeasonApr.png"  
        align="left" 
        style="display:none"/>

<img    id="fujiItem" 
        src="Images/Produce/Fruit/FujiApple.png" 
        style="float:left; display:none;" />
<img    id="fujiSeason" 
        float="top" 
        src="Images/InSeason/InSeasonMar.png"  
        align="left" 
        style="display:none;"/>

<img    id="goldenDeliciousItem" 
        src="Images/Produce/Fruit/GoldenDeliciousApple.png"  
        style="float:left; display:none;"/>
<img    id="goldenDeliciousSeason" 
        src="Images/InSeason/InSeasonFeb.png"  
        align="left"
        style="display:none;"/>

<img    id="grannySmithItem" 
        src="Images/Produce/Fruit/GrannySmithApple.png"  
        style="float:left; display:none;"/>
<img    id="grannySmithSeason" 
        src="Images/InSeason/InSeasonApr.png" 
        align="left"
        style="display:none;"/><br>

<table width="170px" height="70px">
<tr>
    <td>
    <a href="Main.html" id="back" title="about" class="button">
    <img src="Images/Buttons/backButton.png" align="right">
    </td>
  </tr>
</table>
</body>
</html>

質問が長くなっていたので、私はクッキーを含めませんでしたが、それが有用であるならば、私はそうすることができます。助けていただければ幸いです、ありがとう

4

1 に答える 1

0

ここで 2 つの問題に気付きました。

まず、2 つの別々のページを使用していますdocument.getElementByIdが、現在表示しているページの要素にしかアクセスできません。だから、あなたの行：

var imgEl = document.getElementById(imageId);
var checkEl = document.getElementById(checkId);

2 つのページの要素にアクセスしようとしているため、失敗する必要があります。スクリプトを実行しているページに関係なく、これらの行の 1 つが null を返します。あなたの質問は、2 つの個別の HTML ファイルが互いにどのように関連しているかを説明していないため、これを修正することはできません (チェックボックスがクリックされるたびに最初のページが 2 番目のページをロードしますか、または 2 つのページがフレームまたは iframe にロードされますか?親ページ？）

2 番目の問題は、toggleVisibility関数が 2 つのパラメーターで定義されていることですが、コード (たとえば):

onChange=  "toggleVisibility('grannySmithItem'); 
               toggleVisibility('grannySmithSeason');

パラメータを 1 つだけ指定してメソッドを (2 回) 呼び出します。同じ関数について話している場合 (2 つのページのそれぞれに異なる関数定義がある可能性があります)、imageIdが提供されないため、関数は正しいイメージを識別できません。

于 2013-01-21T15:12:31.133 に答える