0

这是我关于 Stack Overflow 的第一个问题，我是 Javascript 新手（一直在自学 Python 以感受编码），我想我会尝试一个简单的网络应用程序，看看翻译我的将 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>

这个问题越来越长，所以我没有包括cookie，但如果它有用的话我可以。任何帮助表示赞赏，谢谢

4

1 回答 1

0

I'm noticing two issues here.

First off, you're using two separate pages, but document.getElementById can only access the elements of the page you're on. So, your lines:

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

have to fail, because they are trying to access elements in the two pages. Whichever page you're running the script on, one of those lines will return null. Your question doesn't describe how the two separate HTML files relate to each other, so I can't help you fix this (Does the first load the second whenever a checkbox is clicked, or are the two pages loaded in frames or iframes of a parent page?).

The second issue is that your toggleVisibility function is defined with two parameters, but your code (for example):

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

calls the method (twice) with only one parameter. If we're talking about the same function (you might have a different function definition on each of the two pages), then the function can never identify the correct image, because the imageId is never supplied.

于 2013-01-21T15:12:31.133 回答