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

回答1:

write this

To hide

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

to show

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

回答2:

For Visible:

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

For Invisible:

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

回答3:

getElementById returns a single object for which you can specify the style.So, the above explanation is correct.
getElementsByTagName returns multiple objects(array of objects and properties) for which we cannot apply the style directly.

回答4:

Use the id of the element to do the same.

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

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

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

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

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

回答9:

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

回答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/

回答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;

来源：https://stackoverflow.com/questions/8557119/making-a-button-invisible-by-clicking-another-button-in-html

标签

javascript

html

visibility

hidden