CODEWITHSUNDEEP
javascripthtmlvisibilityhidden
Nasrin hakim Mithila
Nasrin hakim Mithila

Reputation: 149

Making a button invisible by clicking another button in HTML

How can I make a button invisible by clicking another button in HTML?
I have written like below, but it doesn't work.

<input type="button" onclick="demoShow();" value="edit" />
<script type="text/javascript"> 
    function demoShow()
    { document.getElementsByName('p2').style.visibility="hidden"; }
</script>
<input id="p2" type="submit" value="submit" name="submit" />

Upvotes: 9

Views: 118826

Answers (12)

Bruno
Bruno

Reputation: 23

I did that way

<script>
            const AddMoreBtn = document.getElementById('add-more')
            AddMoreBtn.onclick = function(){
                if (document.getElementById('extraField').style.visibility == 'collapse'){
                    alert('Extra fields are not obligatory to be filled')             
                    document.getElementById('extraField').style.visibility='visible';
                } else{
                    document.getElementById('extraField').style.visibility='collapse';
                }
            }
</script>

Upvotes: 0

Ranga Reddy
Ranga Reddy

Reputation: 3066

For Visible:

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

For Invisible:

document.getElementById("test").style.visibility="hidden";

Upvotes: 5

Gavin Mannion
Gavin Mannion

Reputation: 905

I found problems with the elements being moved around using some of the above, so if you have objects next to each other that you want to just swap this worked best for me

document.getElementById('uncheckAll').hidden = false;
document.getElementById('checkAll').hidden = true;

Upvotes: 0

Sonal Khunt
Sonal Khunt

Reputation: 1894

write this

To hide

{document.getElementById("p2").style.display="none";}

to show

{document.getElementById("p2").style.display="block";}

Upvotes: 14

Umesh Patil
Umesh Patil

Reputation: 10685

  1. getElementById returns a single object for which you can specify the style.So, the above explanation is correct.

  2. getElementsByTagName returns multiple objects(array of objects and properties) for which we cannot apply the style directly.

Upvotes: 2

nimday
nimday

Reputation: 343

Try this

<input type="button" onclick="demoShow()" value="edit" />
<script type="text/javascript"> 
function demoShow()
{p2.style.visibility="hidden";}
</script>
<input id="p2" type="submit" value="submit" name="submit" />

http://jsbin.com/gurolawu/1/

Upvotes: 0

Neminath
Neminath

Reputation: 95

$( "#btn1" ).click(function() {
 $('#btn2').css('display','none');
});

Upvotes: 0

Harsh Vardan Gupta
Harsh Vardan Gupta

Reputation: 21

Using jQuery!

var demoShow = function(){
    $("#p2").hide();
}

But I would recommend you give an id to your button on which you want an action to happen. For example:

<input type="button" id="p1" value="edit" />
<input type="button" id="p2" value="submit" name="submit" />

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

To show it again you can simply write: $("#p2").show();

Upvotes: 1

NavaStha
NavaStha

Reputation: 96

Use this code :

<input type="button" onclick="demoShow()" value="edit" />
<script type="text/javascript"> 
function demoShow()
{document.getElementById("p2").style.visibility="hidden";}
</script>
<input id="p2" type="submit" value="submit" name="submit" />

Upvotes: 0

Mr.T.K
Mr.T.K

Reputation: 2356

try this

function demoShow() {   
document.getElementById("but1").style.display="none";

}



<input type="button" value="click me" onclick="demoShow()" id="but" />

<input type="button" value="hide" id="but1" />

Upvotes: 1

JCOC611
JCOC611

Reputation: 19729

To get an element by its ID, use this:

document.getElementById("p2")

Instead of:

document.getElementsByName("p2")

So the final product would be:

document.getElementsById("p2").style.visibility = "hidden";

Upvotes: 0

check123
check123

Reputation: 2009

Use the id of the element to do the same.

document.getElementById(id).style.visibility = 'hidden';

Upvotes: 2

Related Questions