web-dev-qa-db-ja.com

HTMLで別のボタンをクリックしてボタンを非表示にする

HTMLで別のボタンをクリックしてボタンを非表示にするにはどうすればよいですか?
以下のように書きましたが、うまくいきません。

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

これを書いて

隠れる

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

示す

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

可視の場合:

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

非表示の場合:

document.getElementById("test").style.visibility="hidden";
3
Ranga Reddy
  1. getElementByIdは、スタイルを指定できる単一のオブジェクトを返します。したがって、上記の説明は正しいです。

  2. getElementsByTagNameは、スタイルを直接適用できない複数のオブジェクト(オブジェクトとプロパティの配列)を返します。

2
Umesh Patil

要素のidを使用して同じことを行います。

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

これを試して

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" />
1
Mr.T.K

JQueryを使用する!

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

ただし、アクションを実行するボタンにIDを指定することをお勧めします。例えば:

_<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>
_

もう一度表示するには、次のように書くだけです:$("#p2").show();

1

これを試して

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

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

IDで要素を取得するには、次のようにします。

document.getElementById("p2")

の代わりに:

document.getElementsByName("p2")

したがって、最終的な製品は次のようになります。

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

このコードを使用してください:

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

上記のいくつかを使用して要素を移動する際に問題が見つかりました。そのため、オブジェクトを隣り合わせに配置し、単に交換したい場合は、これが私にとって最もうまくいきました

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