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";}
可視の場合:
document.getElementById("test").style.visibility="visible";
非表示の場合:
document.getElementById("test").style.visibility="hidden";
getElementById
は、スタイルを指定できる単一のオブジェクトを返します。したがって、上記の説明は正しいです。
getElementsByTagName
は、スタイルを直接適用できない複数のオブジェクト(オブジェクトとプロパティの配列)を返します。
要素のid
を使用して同じことを行います。
document.getElementById(id).style.visibility = 'hidden';
これを試して
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" />
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();
これを試して
<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" />
$( "#btn1" ).click(function() {
$('#btn2').css('display','none');
});
IDで要素を取得するには、次のようにします。
document.getElementById("p2")
の代わりに:
document.getElementsByName("p2")
したがって、最終的な製品は次のようになります。
document.getElementsById("p2").style.visibility = "hidden";
このコードを使用してください:
<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" />
上記のいくつかを使用して要素を移動する際に問題が見つかりました。そのため、オブジェクトを隣り合わせに配置し、単に交換したい場合は、これが私にとって最もうまくいきました
document.getElementById('uncheckAll').hidden = false;
document.getElementById('checkAll').hidden = true;