Javascript 试图显示和隐藏html文档的某些部分_Javascript_Html_Dom

Javascript 试图显示和隐藏html文档的某些部分

javascript html dom

Javascript 试图显示和隐藏html文档的某些部分,javascript,html,dom,Javascript,Html,Dom,以下是我的页面的HTML： <!DOCTYPE html> <html> <body> <link href = "sites.css" type = "text/css" rel = "stylesheet"/> <image src = "beach_houses.jpg" id = "sites"> <form id = "details">

以下是我的页面的HTML：

     <!DOCTYPE html>

        <html>

    <body>

    <link href = "sites.css" type = "text/css" rel = "stylesheet"/>

    <image src = "beach_houses.jpg" id = "sites">

    <form id = "details">
     Please enter your name: <input type = "text" id = "name"><br/><br/>
     Please provide a valid e-mail: <input type = "text" id = "e-mail"><br/><br/>
     I am on a tour<input type = "checkbox" id = "status">

    <div id = "further"><br/>
     Indicate your gender 
     M<input type = "radio" name = "gender"value = "male" id = "M"> 
     F<input type = "radio" name = "gender" value = "female" id = "F">
  </div><br/></br>
    <input type = "submit" value = "submit!">
</form>

    <br/><br/><div id = "error" ></div>

    </body>

    <script src = "function.js" type = "text/javascript"></script>

    </html>

这个想法是，当选中“我在旅行”复选框时，会弹出“表明您的性别”问题。然而，情况恰恰相反；默认情况下，这个问题似乎是可见的，当我单击复选框时，它就不可见了。为什么会这样

先谢谢你 saad将

更改为

及
非常感谢。我更改了CSS文件中的display属性；成功了。
Images.onclick = function() {


clearInterval(iHandle);
}


function prepare() {

document.getElementById("status").onclick = function() {

    if (document.getElementById("status").checked) 

        document.getElementById("further").style.display = "block";
    else 

        document.getElementById("further").style.display = "none";

    document.getElementById("further").style.display = "none";

};


document.getElementById("details").onsubmit = function() {

    if(document.getElementById("name").value == "") {

        document.getElementById("error").innerHTML = "Please provide a name!";

        document.getElementById("error").style.color = "red";

        return false;

    }

    else if (document.getElementById("e-mail").value == "") {

        document.getElementById("error").innerHTML = "Please provide a valid e-mail address!";

        document.getElementById("error").style.color = "red";

        return false;

    }
};



}



window.onload = function() {

    prepare();
};

document.getElementById("status").onclick = function() {

    if (document.getElementById("status").checked) {

        document.getElementById("further").style.display = "block";
    }
    else {
        document.getElementById("further").style.display = "none";
    }
};