display可以设置为inlie(行内元素)、block(块级元素)、inline-block(行内块级)、none(隐藏)。

教程里介绍的其实是display的常用属性值，实际上它的默认值为inline。

因此你的函数在第一次运行时其实是将原属性值（inline）换成了block，而你并看不出二者的区别，误以为没有变化。如果你再次点击，此时它的属性值为block，就可以隐藏（属性值变为none）。

建议，如果你希望能直接改变隐藏和显示状态，可以直接判断display==none。

function btn(){

   var mychar = document.getElementById("con");

   if(mychar.style.display == "none"){

       mychar.style.display ="block";

       }else{

           mychar.style.display = "none";

       }

}