javascript实现文字显示与隐藏

check()控制文字的显示，当单击按钮时，前面的文字消失且按钮文字变为显示，在单击一次，则文字显示且按钮变为隐藏，自己编了一个，但效果实现不了，大家给看看
<body>
<form name="form">
<div id="text" style="visibility:visible">这是显示的内容</div><input type="button" name="bt" value="隐藏" onclick="check()"></form>
<script>
flag=1;
function check(){
if(flag==1){
text.style.visibility=hidden;
document.form.bt.value=显示;
flag=0;
}
else
{
text.style.visibility=visible;
document.form.bt.value=隐藏;
flag=1;
}
}
</script>
</body>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
    <title>div and css</title>
    </head>
    <body>
    <form name="form">
    <div id="text" style="visibility:visible">这是显示的内容</div><input type="button" name="bt" value="隐藏" onclick="check()"></form>
    </body>
    <script>
    flag=1;
    function check(){
    if(flag==1){
    text.style.visibility="hidden";
    document.form.bt.value="显示";
    flag=0;
    }
    else
    {
    text.style.visibility="visible";
    document.form.bt.value="隐藏";
    flag=1;
    }
    }
    </script>
    </html>
      

  2.   

    <body>
    <form name="form">
    <div id="text" style="visibility:visible">这是显示的内容</div><input type="button" name="bt" value="隐藏" onclick="check()"></form>
    <script>
    flag=1;
    function check(){
    if(flag==1){
    document.getElementById("text").style.display='none';
    //text.style.visibility=hidden;
    document.form.bt.value='显示';
    flag=0;
    }
    else
    {
    document.getElementById("text").style.display='';
    //text.style.visibility=visible;
    document.form.bt.value='隐藏';
    flag=1;
    }
    }
    </script>
    </body>