0

I have started learning html , css, javascript just 3 weeks ago. Here is my first and very simple program. It has a form , the form has 3 buttons and nothing else. One of the buttons is initially hidden. Clicking on one of the other two buttons would make the hidden button visible. After making it visible, clicking on the third button would hide it again. Thats it , small simple program but it doesnt work. When I click the "show" button , the hidden button does not appear. I have been trying to fix it for 4 hours but I got no clue yet why its not working . Somebody help please. By the way I dont know nothing about jquery, so only javascript help please.

`

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

`

metal7
  • 5
  • 1
  • 4

1 Answers1

0

add the attribute: type="button" to all the buttons, or else the default attribute of type="submit" is used (causing an undesired page refresh).

<button type="button">

Then...

Your javascript doesn't actually toggle the html hidden attribute. This should work instead

show the element: 

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

hide the element:

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

Keep in mind, there are a multitude of methods to show and hide elements that you can research, but I'm conforming to your current design choice.

Georgette Pincin
  • 292
  • 3
  • 11
  • Thanks for your quick answer Pincin, after changing the code for your suggestion, now the hidden button appears for a nano-second and it becomes hidden right away , but I wanted the button to stay visible until the other button is clicked. So my new code is :- – metal7 Aug 10 '15 at 00:12
  • Thanks for your quick answer Pincin, after changing the code for your suggestion, now the hidden button appears for a nano-second and it becomes hidden right away , but I wanted the button to stay visible until the other button is clicked. So, there is no way to make a hidden button in a form visible ??? If there are other better design to do it I'd be glad to know. I just want to do it using html css and javascript . Just run the code using those two lines you suggested , you'll see what I mean. – metal7 Aug 10 '15 at 00:25
  • set attribute type="button" in – Georgette Pincin Aug 10 '15 at 00:56
  • Thanks a lot Pincin , I am 'Affected' by your kind help (excuze my fourth language english hehehe). Btw , as I am new in this thing, is there anything to validate your javascript code, I mean, for html and css there is validator website but I think there are muchmore possibility of error on javascript code and hence need to be validated. – metal7 Aug 10 '15 at 02:22
  • English is a tough language, I used to teach it! Try this for javascript code validation http://www.jslint.com or http://codebeautify.org/jsvalidate. If this answer is complete, make sure you flag it as an accepted answer (the check mark on the left). – Georgette Pincin Aug 10 '15 at 02:26
  • Also read about strict mode for javascript here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode – Georgette Pincin Aug 10 '15 at 02:29
  • Thanks , I flagged it and it gave me a msg something about earning 15 reputation before it will show the score. This is my first post in stack overflow and I want to change the title of the post into "show/hide a button inside form with javascript" becuz it was about form not about table. So, how to change the title of the post ? Btw, the two sites to validate javascript dont seem to be helpful but thanks anyway. – metal7 Aug 10 '15 at 02:54
  • You can use the edit button at the bottom of your post, and you can then edit the title input. Also, to accept my answer, you click on the checkmark (it will turn green), not the arrows. Thanks! – Georgette Pincin Aug 10 '15 at 03:35