Making a button invisible by clicking another button in HTML

Question

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

Uproarious

Answer 1

write this

To hide

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

to show

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

Achaea

Answer 2

For Visible:

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

For Invisible:

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

Wittol

Answer 3

Use the id of the element to do the same.

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

Dejected

Answer 4

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.

Chace

Answer 5

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

Cultrate

if you want occupy some space in the sense apply "visibility:hidden", otherwise "display:none;" – Cultrate

I was just about to suggest that you explained the difference between the two lol – Parity

Answer 6

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();

Indemnification

Answer 7

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

Parity

Answer 8

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

Attenweiler

Answer 9

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

Tenedos

This answer need more than a block of code. For one thing, it depends on another third party library: jQuery. A better answer describes what the code does and why the particular approach was chosen. – Misusage

Answer 10

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/

Fluoresce

Answer 11

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;

Ticker

Answer 12

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>

Sarabia

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Toneme