- ベストアンサー
ランダムに要素を切り替えるJavaScriptの実装方法
- ボタンクリックでランダムに要素を切り替えるJavaScriptの実装方法を教えてください。
- ランダムで表示されるブロック要素内のボタンをクリックすると、要素が切り替わる仕組みを作りたいです。
- 要素の切り替えにはJavaScriptの関数を使用して実装することができます。
- uni0214
- お礼率78% (11/14)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<html> <head> <style> .box{display:none} </style> <body> <script> window.onload=function(){swp((Math.random()<.5)?1:0)} function $(o){ return document.getElementById(o); } function swp(n){ $('view2').style.display=(n==0)?'block':'none'; $('view1').style.display=(n==0)?'none':'block'; } </script> <div id="view1" class="box"> <img src="img01.jpg" alt="画像１" onClick="location.href='url01.html'"> <img src="img/ch01.gif" alt="要素を切り替え1" onClick='swp(0)'> </div> <div id="view2" class="box"> <img src="img02.jpg" alt="画像２" onClick="location.href='url02.html'"> <img src="img/ch02.gif" alt="要素を切り替え2" onClick='swp(1)'> </div> </body> </html> 最初からboxのスタイルは、非表示にしておきます。 bodyがloadされたらランダムでどちらかを表示。 <h2>タグの中に文字が無いので必要ないかと思います <br>で改行せず、display:blockにしました document.writeで書き出すときは２要素分が必要ですよ！ それが無いのが動かない原因。
お礼
_pipi_さん≫ ありがとうございます！ さっそく実装してみます！！