Javascript堅持用cookie /複選框圖像可見性

這是我在堆棧溢出的第一個問題，我是新來的Javascript（一直在教我自己的Python來獲得編碼的感覺），並認爲我會嘗試我的手在簡單的網絡應用程序，看看把我的Python知識轉化爲Javascript是多麼容易。Javascript堅持用cookie /複選框圖像可見性

基本上，應用程序會讓你知道你最喜歡的水果等季節。所以我在一個頁面上有一個複選框列表'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>

的問題是越來越長，所以我不包括餅乾，但我可以，如果它有用。任何幫助表示讚賞，謝謝

來源

2013-01-21 Sam

我在這裏注意到兩個問題。

首先，您使用兩個單獨的頁面，但document.getElementById只能訪問您所在頁面的元素。所以，你的線路：

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

必須失敗，因爲他們試圖訪問這兩個頁面中的元素。無論您在哪個頁面上運行腳本，其中一行都會返回null。你的問題沒有描述兩個單獨的HTML文件是如何相互關聯的，所以我不能幫你解決這個問題（單擊複選框時第一次加載第二個，還是加載兩個頁面的幀或iframe一個父母頁面？）。

的第二個問題是，你的toggleVisibility函數由兩個參數定義的，但是您的代碼（例如）：

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

調用只有一個參數的方法（兩次）。如果我們談論的是相同的功能（您可能在兩個頁面上都有不同的功能定義），那麼該功能永遠無法識別正確的圖像，因爲從不提供imageId。

來源

2013-01-21 15:12:31

是的，你對第一點感興趣。我已經在上個月的相同頁面上進行了測試，所以我還沒有遇到這個問題。至於結構，當應用程序完成後，它們將完全分開.html頁面，這些頁面不會**鏈接到彼此。爲了得到他們每個人，你將不得不導航回index.html，然後到另一個例如。 fruitpicker.html - > index.html - > seasonalguide.html。至於你指出的第二個問題，據我所知，這段代碼的作品。正確的圖像在需要時顯示（這是您的意思？）。 – Sam

Javascript堅持用cookie /複選框圖像可見性

回答

相關問題