How can I make the button save visible when I click the edit button? This is my code so far, but it happends nothing. I'm working in a jsp

   <INPUT TYPE="BUTTON" VALUE="Edit" ONCLICK="btnEdit()" class="styled-button-2">
    <INPUT TYPE="BUTTON" VALUE="Save" ONCLICK="btnSave()" class="styled-button-2" style="visibility:hidden;" id="save">

    <SCRIPT LANGUAGE="JavaScript">
        function btnEdit()
        {
            {document.getElementsById("save").style.visibility="visible";}

        }    
     </script>

How can I make the button save visible when I click the edit button? This is my code so far, but it happends nothing. I'm working in a jsp

   <INPUT TYPE="BUTTON" VALUE="Edit" ONCLICK="btnEdit()" class="styled-button-2">
    <INPUT TYPE="BUTTON" VALUE="Save" ONCLICK="btnSave()" class="styled-button-2" style="visibility:hidden;" id="save">

    <SCRIPT LANGUAGE="JavaScript">
        function btnEdit()
        {
            {document.getElementsById("save").style.visibility="visible";}

        }    
     </script>

• javascript
• html
• css
• jsp

Share Follow edited Oct 9, 2015 at 9:41 Aniket Kulkarni 13k99 gold badges6969 silver badges9292 bronze badges asked Mar 2, 2015 at 16:12 wohooooowohooooo 2311 gold badge11 silver badge77 bronze badges 3

• 3 getElementById not getElementsById. – Ram Commented Mar 2, 2015 at 16:15
• you also can get rid of the extra "block" created with the second level braces – n1kkou Commented Mar 2, 2015 at 16:18
• please, read the javascript conventions... your code is horrible – Tommaso Bertoni Commented Mar 2, 2015 at 16:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

DEMO

It is considered bad practice to add onclick in your html, and you miss-spelled a method. You should equally avoid adding your css in your html as well.

HTML:

<INPUT TYPE="BUTTON" VALUE="Edit" class="styled-button-2" id="edit">
<INPUT TYPE="BUTTON" VALUE="Save" class="styled-button-2" id="save">

JS:

var edit = document.getElementById("edit");
var save = document.getElementById("save");

edit.onclick = function() {
    save.style.visibility = "visible";

}

CSS:

#save {
    visibility: "hidden";
}

Must be a long day.

You have a misspelling.

Not right

document.getElementsById

Right Way

document.getElementById

document.getElementById("save").style.visibility="visible";

use getElementById not getElementsById

Probably a simple error, but you wrote getElementsById not getElementById, which meant you were trying to get more than one element, when infact you only need to get the "save" button.

<SCRIPT LANGUAGE="JavaScript">
    function btnEdit()
    {
        {document.getElementById("save").style.visibility="visible";}

    }    
 </script>

Side note: You may want to tidy your code:

<SCRIPT LANGUAGE="JavaScript">
    function btnEdit()
    {
        document.getElementById("save").style.visibility="visible";
    }    
</script>