Question

我在3周前开始学习html，css，javascript。这是我的第一个非常简单的程序。它有一个表单，表单有3个按钮，没有别的。其中一个按钮最初是隐藏的。单击其他两个按钮之一将使隐藏按钮可见。使其可见后，单击第三个按钮将再次隐藏它。多数民众赞成，小的简单程序，但它不起作用。当我点击＆＃34;显示＆＃34;按钮，隐藏按钮不会出现。我一直试图修复它4个小时，但我不知道为什么它不工作。请有人帮忙。顺便说一句，我对jquery一无所知，所以只有javascript帮助。

`

// To display the result
string preval = Counter.get text()+" ";
Counter.setText("0");

//Pls note Counter is to display result in the GUI
//Now the question method
Public void  init() {
    Call question==0;
}

//First Question
If(callquestion==1) {
    Qus.setText(" 1+1");
    A.setText("A) 2");
    B.setText("A) 8");
    C.setText("A) 9");
    D.setText("A) 10");
}

//Answer, let's assume the answer is A// note A, B, C, D are all JLables
Private void AmouseClicked(java.awt.event.MouseEvent evt) {
    If(callquestion==1 && D.isFocusable()) {
        Int d= Integer.parseInt(Counter.getText());
        Int e= 10;
        Int f=d+10;
        Counter.setText(f+" ");
    }
}

<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 ; }

`

Answer 1

添加属性：type =＆＃34; button＆＃34;到所有按钮，或者类型=＆＃34的默认属性;提交＆＃34;使用（导致不需要的页面刷新）。

<button type="button">

则...

您的javascript实际上没有切换html隐藏属性。这应该工作

显示元素：

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

隐藏元素：

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

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

使用javascript显示/隐藏表单内的按钮

1 个答案: