show/hide 带有 javascript 的表单内的按钮

Question

我在 3 周前才开始学习 html、css、javascript。这是我的第一个也是非常简单的程序。它有一个表单，表单有 3 个按钮，没有别的。其中一个按钮最初是隐藏的。单击其他两个按钮之一将使隐藏的按钮可见。使其可见后，单击第三个按钮将再次隐藏它。就是这样，一个简单的小程序，但它不起作用。当我点击 "show" 按钮时，隐藏按钮没有出现。我已经尝试修复它 4 个小时了，但我不知道为什么它不起作用。请有人帮忙。顺便说一句，我对jquery一无所知，所以只有javascript请帮忙。

`

<meta charset="UTF-8" />
<title>Useless Form</title>

<script type="text/javascript" language="JavaScript">

    var hidden = true ;  

    function show() 
    {
         if (hidden) 
        {
           document.getElementById("third").style.visibility = 'visible';
           hidden = false ;          
        }
       else 
          {
              alert(" The button is already visible !") ;
          }
    }

    function hide() 
    {

       if (!hidden) 
        {
           document.getElementById("third").style.visibility = 'hidden';
           hidden = true ;

        }
       else 
          {
              alert(" The button is already hidden !") ;
          }
    }      


</script>

<style type="text/css">
 h1
{
    font-family: calibri;   
    text-align: center;         
}

button
{  
    color: blue   ;
    font-size: 1em ;
    margin-left: 133px;

}  

 table
 { 
   margin-top: 190px; 
 }

form
{

    position: absolute;
    top: 8%;
    bottom: 7%; 
    left: 15% ;
    right: 15% ;    
    color: #fb9  ;          
    background-color: #420 ;        
    border: 4px double #C96333  ;               
}   
body { background-color: #000 ; }

 <form>

 <h1> My utter useless form </h1> <br>

 <table>
   <tr>

     <td> <button    id="first"    onclick="show()"  >show</button> </td>
     <td> <button    id="second"   onclick="hide()">hide</button> </td>
     <td> <button    id="third"      hidden>effected</button> </td>

   </tr>
 </table>   

</form>

`

Answer 1

将属性：type="button" 添加到所有按钮，否则使用默认属性 type="submit"（导致不需要的页面刷新）。

<button type="button">

然后...

您的 javascript 实际上并未切换 html 隐藏属性。这应该可以代替

显示元素：

document.getElementById("third").removeAttribute("hidden");

隐藏元素：

document.getElementById("third").setAttribute("hidden", 'true');

请记住，您可以研究多种显示和隐藏元素的方法，但我符合您当前的设计选择。

show/hide 带有 javascript 的表单内的按钮

show/hide a button inside form with javascript

hide

hidden

visible