電子書籍の厳選無料作品が豊富!

お世話になります。Javascriptについて質問させていただきます。
拙い説明で分かりにくいかと思いますが、ご教授いただけたらと思います。

javascriptとcssを使用して、ページをリロードする度に、divの要素をランダムに表示させるようにしたいと考えています。
ランダムで表示させるにはfunction test(no)関数のどこかにランダムで値を取得できるようにする必要があると思っているのですが、上手く設定ができずに悩んでいます。

ご回答頂けたら幸いです。

■ html

<body onLoad="test(no)">
<div id="link">

<div class="link01">
<p>文章1</p>
</div>

<div class="link02">
<p>文章2</p>
</div>

<div class="link03">
<p>文章3</p>
</div>

</div>

<ul>
<li><a href="#" onclick="showChanger(1);">リンク1</a></li>
<li><a href="#" onclick="showChanger(2);">リンク2</a></li>
<li><a href="#" onclick="showChanger(3);">リンク3</a></li>
</ul>



■javascript
function test(no){


var parenObj=document.getElementById("link");
for(var i in parenObj.childNodes){

var childObj=parenObj.childNodes[i];
if(childObj.tagName=="DIV"){


if(no == 1){
if(childObj.className=="link01"){
childObj.style.display = "block";
}else{
childObj.style.display = "none";
}
}


if(no == 2){
if(childObj.className=="link02"){
childObj.style.display = "block";
}else{
childObj.style.display = "none";
}
}

if(no == 3){
if(childObj.className=="link03"){
childObj.style.display = "block";
}else{
childObj.style.display = "none";
}
}


}

}

}


■css
.link01 {
display:block;
margin-bottom:10px;
}
.link02 {
display:none;
margin-bottom:10px;
}
.link03 {
display:none;
margin-bottom:10px;
}

A 回答 (3件)

function test(){


   var i, a, divLen = 0;
   var t = document.getElementById('link');
   for(i = 0; ( a = t.getElementsByTagName('div')[i]); i ++,divLen ++){
      a.style.cssText = 'display:none;margin-bottom:10px;';
   }
   t.getElementsByTagName('div')[Math.floor(Math.random()*divLen)].style.display = 'block';
}
function showChanger(n){
   var i, a;
   for(i = 0; (a = document.getElementById('link').getElementsByTagName('div')[i]); i ++){
      a.style.display = (i+1 == n) ? 'block' : 'none';
   }
}

<div id="link">

<div class="link01">
<p>文章1</p>
</div>

<div class="link02">
<p>文章2</p>
</div>

<div class="link03">
<p>文章3</p>
</div>

</div>

<ul>
<li><a href="javascript:void(0)" onclick="showChanger(1);return false;">リンク1</a></li>
<li><a href="javascript:void(0)" onclick="showChanger(2);return false;">リンク2</a></li>
<li><a href="javascript:void(0)" onclick="showChanger(3);return false;">リンク3</a></li>
</ul>

数が増えるんだったらこう書いたほうがいいのかな?
・CLASSじゃなくてIDをふったほうがやりやすいです

この回答への補足

一部質問内容に必要の無い記述がありました、すいません!
html部分のリストが無い状態で、考えたときはどうなりますか?

ページを表示するたびにdivの要素がランダムに表示するように考えているのですが、どうしたらいいでしょうか?

補足日時:2009/03/19 21:48
    • good
    • 0
この回答へのお礼

回答ありがとうございます。heikuu2009様から頂いた回答内容は既に、実現が出来ていました。その機能プラスページをリロードする度に内容がランダムに出したいと考え今回、質問させて頂きました。
自分の説明不足もありまして、お手間を取らせました。何とかやりたいことは実現できました。ありがとうございます。

お礼日時:2009/03/23 16:41

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">


<title>Random display</title>
<div id="p">
<div class="rand a">123</div>
<div class="rand b">456</div>
<div class="rand c">789</div>
<div class="rand d">012</div>
<div class="e rand">345<div>これがまずい</div></div>
</div>

<script type="text/javascript">
//全角空白は半角空白かタブに変換のこと
//@cc_on
/*@if (1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ 'load', function () {
 var _TARGET_DIV = 'p';
 var _TARGET_CSS = 'rand';
 var cnt = 0;
 var c = document.getElementById(_TARGET_DIV).firstChild;
 var r = new RegExp( '\\b' + _TARGET_CSS + '\\b');
 var objs = [];
 
 while (c) {
  if (c.tagName == 'DIV' && c.className.match(r)) c.style.display = 'none';
  objs.push(c);
  cnt++;
  c = c.nextSibling;
 }
 objs[Math.random()*cnt|0].style.display = 'block';

}, false);
</script>
    • good
    • 0
この回答へのお礼

回答ありがとうございます。参考にさせて頂きます。

お礼日時:2009/03/23 16:42

先ほどの回答について動作確認はされていないのでしょうか?



まずは、あなたが要求する動作が実現されているか確かめてください。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!