※ ChatGPTを利用し、要約された質問です(原文:文字列の表示/非表示)
JavaScriptで要素の表示/非表示を切り替える方法
このQ&Aのポイント
JavaScriptのgetElementByIdメソッドを使用して、指定したクラス名の要素を取得します。
取得した要素のスタイルのdisplayプロパティを切り替えることで、要素の表示/非表示を切り替えることができます。
ただし、getElementByIdメソッドは要素を一つしか取得できないため、getElementsByClassNameメソッドを使用する必要があります。
下記のコードで、ボタンを押すたびに、
sample1
sample2
sample3
の3個の文字列の非表示/表示が切り替わるようにしたいのですが、
alert(elements.length+"個の要素を取得しました");
の実行で、class="sample"のエレメントの個数は正しく取得できているようなのですが、
elements.style.display = elements.style.display == "none" ? "block" : "none";
で非表示/表示が切り替わってくれません。
何か書き方が悪いのでしょうか?
ご経験のある方、御教示ください。
<html>
<head>
<title>document.getElementsByClassName - class名を元にエレメントを取得する</title>
</head>
<!--class名を元にエレメントを取得するのサンプル-->
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
<!--
function execute() {
var elements = document.getElementsByClassName("sample");
alert(elements.length+"個の要素を取得しました");
elements.style.display = elements.style.display == "none" ? "block" : "none";
}
//-->
</script>
<body>
<div id="sample1" class="sample" style="display:none;">sample1</div>
<div id="sample2" class="sample" style="display:none;">sample2</div>
<div id="sample3" class="sample" style="display:none;">sample3</div>
<button onclick="execute()">サンプル実行</button>
</body>
</html>
お礼
ありがとうございました。 助かりました。