                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript入门篇

为什么我写出来的代码点击换第二个内容时，会把按钮这些都隐藏掉呀？求大神帮解。。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>display</title>
    <script type="text/javascript"> 
        function hidetext()  
{  
var mychar = document.getElementById("con");
        mychar.innerHTML="这个是隐藏并显示的新内容";
}  
function showtext()  
{  
var mychar = document.getElementById("con");
mychar.style.display="block";
        mychar.style.color="#eeff00";
document.write("原文"+mychar.innerHTML+"</br>");
        mychar.innerHTML="文字改了";
        document.write("这个是显示的新内容"+mychar.innerHTML);
};
    </script> 
</head> 
<body>  
    <h1>JavaScript</h1>  
    <p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p> 
    <form>
       <input type="button" onclick="hidetext()" value="换第一个内容" /> 
       <input type="button" onclick="showtext()" value="第二个内容" /> 
    </form>
</body> 
</html>