使用cookie/checkbox保持图像可见性的Javascript_Javascript_Image_Html_Checkbox_Persistence

使用cookie/checkbox保持图像可见性的Javascript

javascript image html checkbox

使用cookie/checkbox保持图像可见性的Javascript,javascript,image,html,checkbox,persistence,Javascript,Image,Html,Checkbox,Persistence,这是我关于堆栈溢出的第一个问题，我是Javascript新手（一直在自学Python以获得编码的感觉），我想尝试一下一个简单的web应用程序，看看将Python知识转换为Javascript有多容易基本上，该应用程序会让你知道你最喜欢的水果等什么时候上市。因此，我在一个页面“fruitpicker.html”上有一个复选框列表，在另一个页面“seasonalguide.html”上有相应的图像（这些图像只是带有水果季节阴影的日历图片等）我有一个保存复选框状态的cookie和一个外部JS，它根

这是我关于堆栈溢出的第一个问题，我是Javascript新手（一直在自学Python以获得编码的感觉），我想尝试一下一个简单的web应用程序，看看将Python知识转换为Javascript有多容易

基本上，该应用程序会让你知道你最喜欢的水果等什么时候上市。因此，我在一个页面“fruitpicker.html”上有一个复选框列表，在另一个页面“seasonalguide.html”上有相应的图像（这些图像只是带有水果季节阴影的日历图片等）

我有一个保存复选框状态的cookie和一个外部JS，它根据对应复选框的状态切换图像可见性。其他人在web上使用的大部分cookie都很好用，所以它工作得很好，但是vis 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）
删除后，代码可以工作，但图像状态不会持续。这就是我所能做到的
FroothPicker.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>





问题越来越长，所以我没有包括饼干，但如果有用的话，我可以。
非常感谢您的帮助，谢谢
我注意到两个问题
首先，您使用的是两个单独的页面，但是document.getElementById
只能访问您所在页面的元素。所以，你的台词：
var imgEl = document.getElementById(imageId);
var checkEl = document.getElementById(checkId);

必须失败，因为他们试图访问两个页面中的元素。无论在哪个页面上运行脚本，其中一行都将返回null。您的问题没有描述这两个单独的HTML文件是如何相互关联的，因此我无法帮助您解决这个问题（是在单击复选框时第一个加载第二个，还是在父页面的框架或iFrame中加载这两个页面？）
第二个问题是，您的toggleVisibility
函数是用两个参数定义的，但您的代码（例如）：
仅使用一个参数调用该方法（两次）。如果我们讨论的是同一个函数（两个页面上的函数定义可能不同），那么该函数永远无法识别正确的图像，因为从来没有提供imageId
。是的，你的第一点就很好了。上个月我在同一页上测试了它，所以我还没有遇到这个问题。至于结构，当应用程序完成时，它们将是完全独立的.html页面，彼此不链接。要找到其中的每一个，您必须导航回index.html，然后再导航到另一个，例如fructpicker.html->index.html->季候指南.html。至于你指出的第二个问题，据我所知，这段代码是有效的。两个正确的图像都会在需要时显示（这是您的意思吗？）。
onChange=  "toggleVisibility('grannySmithItem'); 
               toggleVisibility('grannySmithSeason');