I am trying to create an experiment involving a series of clickable images where a user has to rate an object after clicking on it. The workflow being:

1. User sees the three boxes, one changes color
2. User clicks on the box that changes color
3. User is shown an object (say a skunk)
4. User rates the object by entering in a # into a text input box
5. User sees all three boxes, and the next box changes color

I have the DIV with an id of E1 (representing example 1) set with a default display style of none (set by CSS initially) however it still shows up when I look at the page in my browser. As a result when I should only be seeing a cover.jpg I see E1.jpg along with its associated text input box.

Edit:Oh部分法典尚未完成(例如,Java为记录用来评定物体的摩擦或藏匿或显示其他多功能的大型活动)。 我只想解决显示问题:无;不藏任何东西。

CSS

#apDiv1 {
    position:absolute;
    width:120px;
    height:120px;
    z-index:1;
    left: 656px;
    top: 586px;
    text-align: center;
    display: block;
}

#apDiv2 {
    position:absolute;
    width:120px;
    height:120px;
    z-index:1;
    left: 543px;
    top: 167px;
    text-align: center;
    display: block;
}

#apDiv3 {
    position:absolute;
    width:120px;
    height:120px;
    z-index:1;
    left: 243px;
    top: 167px;
    text-align: center;
    display: block;
}

#div.C1 {
    display: block;
    z-index: 1;
}

#div.E1 {
    display: none;
    z-index: 1;
}

#div.E2 {
    display: none;
}

#div.E3 {
    display: none;
}

</style>

www.un.org/Depts/DGACM/index_spanish.htm Javagust/

<script>
    function divHideShow(divToHideOrShow) 
    {
        var div = document.getElementById(divToHideOrShow);

        if (div.style.display == "block") 
        {
            div.style.display = "none";
        }
        else 
        {
            div.style.display = "block";
        }

    }
    function HideDIV(d) 
    { 
        document.getElementById(d).style.display = "none"; 
    }
    function ShowDIV(d) 
    { 
        document.getElementById(d).style.display = "block";
    }
</script>

<<>Body

<!-- Creates the background for the two screens -->
<div id="ForDualScreen">   
    <img src="Images/Example/House.jpg" width="1280" height="1000" border="0"  style="float:left;" />
    <img src="Images/Black.jpg" width="1280" height="1000" border="0" style="float:right;"/>
</div>  

<a href="javascript:divHideShow( apDiv1 );divHideShow( apDiv2 );">Show/Hide apDivs on click</a>


  <div id="apDiv1">

            <div id="C1">
            <img src="Images/Example/Cover.jpg" onclick="ShowDIV( E1 );HideDIV( C1 );" />
            </div>
            <div id="E1">
                <img src="Images/Example/E1.jpg" />
                <br />
                <input name="E1Rating" type="text" size="5" maxlength="1" oninput="Javascript_RTshowCover" />
            </div>
   </div>     

        <div id="apDiv2">
            <img src="Images/Example/Cover.jpg" onclick="Javascript_showDivw/Image&Rating" />
            <div id="E2">
                <img src="Images/Example/E2.jpg"/>
                <br />
              <input name="E2Rating" type="text" size="5" maxlength="1" oninput="Javascript_showCover" />
            </div>
        </div>

        <div id="apDiv3">
            <img src="Images/Example/Cover.jpg" onclick="Javascript_showDivw/Image&Rating" />
            <div id="E3">
                <img src="Images/Example/E3.jpg"/>
                <br />
              <input name="E3Rating" type="text" size="5" maxlength="1" oninput="Javascript_RTMovetoInstruction" />
            </div>
        </div>