javascript - Hide button after clicked - Stack Overflow

admin管理员组

文章数量:1326447

I am trying to hide a button (not inside form tags) after it has been clicked. Once the form is shown, there is no use for the button. So i would like to hide it after clicked

Here's the existing code.

<script type="text/javascript">
	$(function(){
		var button = document.getElementById("info");
		 var myDiv = document.getElementById("myDiv");

		 function show() {
		     myDiv.style.visibility = "visible";
		 }

		 function hide() {
		     myDiv.style.visibility = "hidden";
		 }

		 function toggle() {
		     if (myDiv.style.visibility === "hidden") {
		         show();
		     } else {
		         hide();
		     }
		 }

		 hide();

		 button.addEventListener("click", toggle, false);
	});
</script>

<input id="info" type="button" value="Имате Въпрос?" class="switchbuton">

I am trying to hide a button (not inside form tags) after it has been clicked. Once the form is shown, there is no use for the button. So i would like to hide it after clicked

Here's the existing code.

<script type="text/javascript">
	$(function(){
		var button = document.getElementById("info");
		 var myDiv = document.getElementById("myDiv");

		 function show() {
		     myDiv.style.visibility = "visible";
		 }

		 function hide() {
		     myDiv.style.visibility = "hidden";
		 }

		 function toggle() {
		     if (myDiv.style.visibility === "hidden") {
		         show();
		     } else {
		         hide();
		     }
		 }

		 hide();

		 button.addEventListener("click", toggle, false);
	});
</script>

<input id="info" type="button" value="Имате Въпрос?" class="switchbuton">

• javascript
• html

Share Improve this question Follow edited Apr 30, 2015 at 9:03 ivan.mylyanyk 2,10144 gold badges3030 silver badges3939 bronze badges asked Apr 30, 2015 at 8:46 Mo-AlantehMo-Alanteh 36133 gold badges44 silver badges1111 bronze badges 4

• By the way, I suppose you are using the third-party library for switch button, so, the class attribute might be "switchbutton". – ivan.mylyanyk Commented Apr 30, 2015 at 8:49
• Also, please, describe what exactly doesn't work (do you receive any error, or your block just doesn't hide) – ivan.mylyanyk Commented Apr 30, 2015 at 8:51
• Does this suits your requirement... jsfiddle/5epLf928/1 ? – Rakesh_Kumar Commented Apr 30, 2015 at 9:00
• I think the problem is in how you're wrapping the function... look at uzay's answer – maioman Commented Apr 30, 2015 at 9:15

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can use jQuery hide

$("#myDiv").hide() // to hide the div

and show like

$("#myDiv").show() // to show the div

Or toggle to toggle the visibility of dom elements

$("#myDiv").toggle() // to toggle the visibility

You can check the result here:

http://jsfiddle/jsfiddleCem/33axo20f/2/

Code is:

<style>
.showButon{
    background:url('http://spacetelescope.github.io/understanding-json-schema/_static/pass.png');
    background-repeat:repeat-y;
    height:30px;
    text-indent:20px;
}
</style>

<div id="myDiv">
    <input id="info" type="button" value="Имате Въпрос?" class="showButon" />
</div>

(function(){
var button = document.getElementById("info");
    var myDiv = document.getElementById("myDiv");

    function toggle() {
        if (myDiv.style.visibility === "hidden") {
            myDiv.style.visibility = "visible";
        } else {
            myDiv.style.visibility = "hidden";
        }
    }

    button.addEventListener("click", toggle, false);
})()

Why don't you use:

<script type="text/javascript">
    $(function(){
        $('#info').click(function() {
            $(this).hide();
        });
    });
</script>

<input id="info" type="button" value="Имате Въпрос?" class="switchbuton">

本文标签： javascriptHide button after clickedStack Overflow