ランダム表示とクリックで表示切替

2023/08/02 06:47

このQ&Aのポイント

コンテンツの内容には、3つのカテゴリーがあり、カテゴリーごとに表示内容が違います。ボタン１～３でカテゴリーの切り替えをしたいという要望があります。
実装したい機能は、毎回読み込み毎に、ランダムでカテゴリーを切り替えて表示したいのですが、それと同時に、ボタン１～３で、カテゴリーの切り替えをしたいというものです。
現在の実装ではカテゴリーの切り替えとボタンのクリック処理がうまく行かないため、改善案を求めています。

ベストアンサー

ランダム表示とクリックで表示切替

2005/09/17 18:43

はじめまして。今回、以下のような点で頭を悩ませています。どなたか良い方法を知っている方がいましたら、アドバイスを頂けたらと思います。宜しくお願いいたします。以下のようなサイトを制作しています。コンテンツの内容には、3つのカテゴリーがあり、カテゴリーごとに表示内容が違います。（レイアウトは同じです） --------------------------- ボタン１　ボタン2　ボタン3 コンテンツ１・・コンテンツ２ --------------------------- ボタン１～３は、カテゴリー選択用のボタン。コンテンツ１と２は、連動しており、 3つのカテゴリー毎に内容が変わります。（カテゴリー１の場合、カテゴリー1用の内容のコンテンツ１とコンテンツ２があると言うことです。）実装したい機能は、毎回読み込み毎に、ランダムでカテゴリーを切り替えて表示したいのですが、それと同時に、ボタン１～３で、カテゴリーの切り替えをしたいというものです。（ボタン１をクリックしたらカテゴリー1用のコンテンツ１とコンテンツ２に切り替わるようにしたいのです。）自分がやったのは、 javascriptをOFFにしている人のために<noscript>タグを使いたいので、コンテンツ部分は、カスタム関数を呼び出すようにしています。はじめに１～３の乱数を出し、カスタム関数では、乱数によってカテゴリー毎のソースをdocument.writeするようにしていました。コンテンツ1と２は、ソース的に場所が離れているため、関数は、コンテンツ１用とコンテンツ２用を用意しました。ですが、このやり方では、ボタンを押したときの処理ができなくなってしまいました。どなたか、良い方法をお知りの方がいましたら、アドバイスを宜しくお願いいたします。

F0X
お礼率50% (1/2)

JavaScript
回答数2
ありがとう数3

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

m035
ベストアンサー率44% (38/86)

2005/09/20 02:57 回答No.2

案1 フレームを使い、htmlを呼び出す（私のやったのと同じ方法）案2 フレームに対して、 top.フレーム名.document.writeln("ソース"); として書き込む。案3 document.getElementById('divのid').innerHTML="ソース"; を使う。divタグなどに動的に書き込める。リロードは必要ないが、onload後に書き込む必要がある。 <div id="hoge"></div>なら document.getElementById('hoge').innerHTML="ソース"; 案4 DOMを使う。参考URLを見るとよいかも知れません。案5 <div style="display:none" id="hoge">  </div> としておき、 document.getElementById('hoge').display="block"; と document.getElementById('hoge').display="none"; で表示/非表示を切り替える。メリット・デメリット案1・2 ほぼどの環境でも動作。ただし、フレームに非対応のときどうするのかを除けば簡単かつ、使える方法。案3 最近のIE/FireFoxやその他のブラウザで動くが、最近のものでも働かないものがあり、古いブラウザでも動かない。それほど難しくはない。案4 詳しくないのでなんとも言えませんが、難しい。案5 これが一番ベターかと思います。といった感じです。閲覧の対象と目的で選んでください。ただし、書き出している内容が、タグを使用するものではなく、単なる文章などの場合、textareaなどに書き込むほうが早いです。これ以降に案5を使った場合を示します。参考になれば幸いです。 <html> <head> <script type="text/javascript">  </script> </head> <body> <script type="text/javascript">  </script> <noscript> <a href="c1.html" target="ifra">カテゴリー1-1</a> <a href="c1.html" target="ifra">カテゴリー1-2</a> <a href="c2.html" target="ifra">カテゴリー1-3</a><br> <a href="c1.html" target="ifra">カテゴリー2-1</a> <a href="c1.html" target="ifra">カテゴリー2-2</a> <a href="c2.html" target="ifra">カテゴリー2-3</a><br> </noscript> </body> </html>

質問者

お礼 2005/09/20 20:27

m035さん。いろいろありがとうございました。やはり、自分自身フレームを使えればと思っているのですが、フレームは使えないので、案３～５のいずれかで都合の良いものを模索しています。 document.getElementById() という便利なものがあるのですね。勉強不足でした。大変参考になりました。本当にありがとうございました。

その他の回答 (1)

m035
ベストアンサー率44% (38/86)

2005/09/18 09:55 回答No.1

これでどうでしょうか？カテゴリー1はc1.html、カテゴリー2はc2.htmlとしてあります。 JavaScriptOFF（ボタンの代わりにリンク）、iframe非対応の場合の対処（別ウィンドウで開く）済み。 <html> <head> <script type="text/javascript">  </script> </head> <body> <script type="text/javascript">  </script> <noscript> <a href="c1.html" target="ifra">カテゴリー1</a> <a href="c2.html" target="ifra">カテゴリー2</a> </noscript> <br><br> <iframe src="c1.html" name="ifra" id="ifra" style="width:100%;height:90%;"> iframeに対応していないようなので、別ウィンドウにリンクは開かれます。 <script type="text/javascript">  </script> </iframe> </body> </html>

質問者

補足 2005/09/20 00:56

m035さん、丁寧なご解答ありがとうございます。こちらの説明不足でした。せっかく貴重なお時間を費やしていただいて申し訳ありません。私が今やろうとしているのは、 1つのＨＴＭＬ内にある2箇所の表示部分をランダムで表示し、かつ、ボタン操作でもその2箇所の表示を切り替えることができるようにしたいのです。さらに、その2箇所の内容は、カテゴリーによって連動するようにしたいのです。 3つのカテゴリーがあり、カテゴリー1に対するコンテンツ１とコンテンツ２。カテゴリー2に対するコンテンツ１とコンテンツ２と言うような形です。さらにこれらのコンテンツ部分はインラインフレーム、別窓などは使えないのです。 1枚のＨＴＭＬで、リロードのたびに、各カテゴリーに該当する2箇所の表示をランダムで切り替え、さらにボタンクリックでボタンに該当するカテゴリー用の表示（2箇所）に切り替えたいのです。また、javascriptをoffにしているユーザに関しては、<noscript>タグで、カテゴリー１用の表示をする。最初に私がしようとしたのは、以下のような感じです。外部jsファイルです。 ///////////////////////////////////////////////// //0～2の乱数を変数randomFlgへ //この値によってカテゴリーを決定 randomFlg = Math.floor(Math.random()*3); //コンテンツ１部分*********************************** function random_contents1() { if(randomFlg == 0) { 　//カテゴリー1表示 document.writeln('ソース'); document.writeln('ソース'); ・・・ } else if(randomFlg == 1) { //カテゴリー２表示 document.writeln('ソース'); document.writeln('ソース'); ・・・ } else if(randomFlg == 2) { //カテゴリー3表示 document.writeln('ソース'); document.writeln('ソース'); ・・・ } ////////////////////////////////////////////// これと同じような形でコンテンツ２部分を設定。そしてhtml部分でコンテンツ１の部分に該当する箇所でrandom_contents1()を呼び出す。同じようにコンテンツ２部分でコンテンツ２用の関数を呼び出す。と言うようにしたのですが、この段階で、ボタン操作を組み込めないことに気づき、困ってしまったのです。（後のことを考えず初めてしまった自分が悪いのですが）自分でもいろいろ模索しているのですが、どうもいい方法が思いつきません。例えば、ボタンを押すことによって、リロードせずに該当箇所のソースを切り替えることはできないのでしょうか？（フォームのクリアボタンのように）もしくは、もっとスマートな別の方法があるのでしょうか？そもそもjavascriptでは、このようなことができないのでしょうか？説明不足で申し訳ありませんでした。これで伝わりますでしょうか？宜しくお願いいたします。