【新手】显示出隐藏的同级元素 遇到的问题

有两个同级按钮。然后点“修改”，“修改”消失，提交出现。。现在提交不出现，问题在哪里？帮看下。
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
  <script>
             function change(el){
 el.style.display="none";
 
 //$(this).next(button).css("display","block");
 el.nextSibling.style.display="block";
 }
            </script>
</head><body>
<input type="button" class="btn mar" value="修改" onclick="change(this);"/>
<input type="button" class="btn mar" value="提交" style="display:none;" name="dd"/>
</body>
</html>

解决方案 »

  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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
      <script>
                 function change(el){
                     el.style.display="none";    
                     
                     //$(this).next(button).css("display","block");            
                     //el.nextSibling.style.display="block";
     document.getElementById("sbmt").style.display="block";
                     }
                </script>
    </head><body>
    <input type="button" class="btn mar" value="修改" onclick="change(this);"/>
    <input type="button" id="sbmt" class="btn mar" value="提交" style="display:none;" name="dd"/>
    </body>
    </html>
      

  2.   

    换行后好像就不是同级了……
    <html>
    <head>
    <title>无标题文档</title>
    <script>
    function change(el){
    el.style.display = "none";
    el.nextSibling.nextSibling.style.display = "block";
    }
    </script>
    </head> <body>
    <input type="button" class="btn mar" value="修改" onclick="change(this);"/>
    <input type="button" class="btn mar" value="提交" style="display:none;" name="dd"/>
    </body>
    </html>
      

  3.   

    试着中间加了一个hidden却变这样
    以为写3个nextSibling就行了<html>
    <head>
    <title>无标题文档</title>
    <script>
    function change(el){
    el.style.display = "none";
    el.nextSibling.nextSibling.nextSibling.nextSibling.style.display = "block";
    }
    </script>
    </head> <body>
    <input type="button" class="btn mar" value="修改" onclick="change(this);"/>
    <input type="hidden">
    <input type="button" class="btn mar" value="提交" style="display:none;" name="dd"/>
    </body>
    </html>