配列の文字列をランダム表示する方法
- JavaScriptを使用して<div>タグの中にscriptで配列の文字列をランダム表示する方法について教えてください。
- 質問者はプログラムを初めて２年目であり、JavaScriptは一年目です。
- 配列の作成方法やランダム表示の方法について詳しく教えてください。
- ベストアンサー
<div>タグの中にscriptで表示
プログラムを初めて２年目、JSは一年目です。 配列の文字列をランダム表示したいのですが、<div>タグの中にscriptで表示させるにはどうしたらよいでしょう？ ソースは下記です。 ～～～～～～～～～～～～～～～～～～～～～～～～ <script type="text/javascript"> var comment = new Array(3) ; //配列を作ってます。 week[0] = "なるほど" ; week[1] = "賛成" ; week[2] = "そう思いません。" ; var randnum = Math.floor( Math.random() * 3 ); // ０,1,2のランダム window.onload = function(){ setInterval('vi()' , 2000 ); } function vi(){ var e = document.getElementById('comment'); e.style.visibility = 'visible'; } // 2秒後にメッセージが表示されます。 </script> <div id="comment" style="visibility:hidden; position:absolute; border: 3px ridge gray; background-color:#ffffcc"> ★ここに配列の文字列を、ランダムで表示したい </div> ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ document.write(comment[ randnum]) ; をうまく使えないでしょうか？ よろしくお願いします。
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html> <title>配列の文字列をランダム表示 & なにかしら</title> <style> #comment { visibility : hidden; position : absolute; border : 3px ridge gray; background : #ffc; } </style> <body> <div id="comment"> 2秒後にメッセージが表示されます </div> <script> var vi = function () { var comment = [ 'なるほど', '賛成', 'そう思いません。' ]; var length = comment.length; var target = document.getElementById ('comment'); var flag = false; var random = Math.random; var memory = null; return function () { var r; if (! flag) { target.style.visibility = 'visible'; flag = true; } do { r = random () * length |0; } while (r === memory); target.firstChild.nodeValue = comment[r]; memory = r; }; } (); setInterval (vi, 2000); </script> setInterval の だい１ひきすうに、もじれつを わたすのは 「わたしのすむ まちより、いなかくさい」と、おもいます。 だい３ひきすうは、ie できょどうが ちがうので、いわゆる クロージャーに してみました。 <div id="comment"></div> のように、なかをからにしないように。（ちょっと とらうま） e.append しつづけると、もじれつがどんどん・・・ これにフェードイン・フェードアウトきのうをつけたいのなら、さいしつもんすると 吉。
その他の回答 (3)
- jjon-com
- ベストアンサー率61% (1599/2592)
document.getElementById('comment').innerHTML = comment[randnum]; http://okwave.jp/qa/q7154675.html の私の過去の回答ANo.2
お礼
ありがとうございました。
- Q-pid
- ベストアンサー率90% (9/10)
こんばんは。 document.writeは、直接BODY要素に対して出力してしまいます。 このため、貴方が作成されたDIVタグごと無くなってしまい、 期待した出力結果を得ることが出来ません。 このシーンのように特定のタグに要素を出力したいのであれば 以下のように、要素を追加する形で対応できると思います。 e.appendChild(document.createTextNode(comment[randnum])); あと、間違い？かも知れませんが var comment = new Array(3) ; //配列を作ってます。 week[0] = "なるほど" ; week[1] = "賛成" ; week[2] = "そう思いません。" ; この部分、以下のようにすべきでは無いでしょうか？ var comment = new Array(3) ; //配列を作ってます。 comment[0] = "なるほど" ; comment[1] = "賛成" ; comment[2] = "そう思いません。" ;
お礼
ありがとうございました。
innerHTML
お礼
ありがとうございました。
関連するQ&A
- ランダムにページを表示するスクリプト
最近社内のホームページを作ることになった初心者です。 トップページの中に３箇所、インラインフレームを使い別のページを 表示させるというものを考えております。 その際に、インラインフレーム内に表示させるページがランダムで選ばれるようにscriptを用いてやってみましたが、３箇所あるインラインフレームのうちの１箇所にしか表示されません・・・。 <script type="text/javascript"> window.onload = function(){ var c = 3; // var ifm = document.getElementById('aaa'); var ifm = document.getElementById('bbb'); var ifm = document.getElementById('ccc'); var r = Math.floor( Math.random() * c ); var urls = new Array(); urls[0] = 'http://www.co.jp'; urls[1] = 'http://www.co.jp'; urls[2] = 'http://www.co.jp'; ifm.src = urls[r]; } </script> あとは３箇所のフレーム内にIDを設定すれば上手く良くと思ったのですが、１箇所にしか表示されません；； 改善点などございましたらご教授いただけないでしょうか？
- 締切済み
- JavaScript
- セレクトメニューに応じたdivタグの内容
javascriptの質問です。フォーム内のセレクトメニューに応じて表示する配列を選び、複数のdivタグ内に表示したいと思っています。getElementByIdでセレクトメニューにIdをつけて呼び出し、selectedIndexでfunction()をonloadという事ですすめています。 複数のdivタグ内に書き出すのにinnerHTMLを使うんだなというところまでは理解しているつもりですが、上手く動きませんので、どなたかご存知の方にご教授願えればと思います。 <html> <head> <script type="text/javascript"> window.onLoad = function(){ document.getElementById("selected").onChange = function(){ var planTitle = this.selectedIndex; var object = document.getElementById("derection"); var TextData = [[],["text","text"],["text","text"]]; for (var i=0; i<TextData[planTitle].length; i++){ document.write(TextData[i]); } } } </script> </head> <body> <form action=""> <select id="selected"> <option value="title01">title01</option> <option value="title02">title02</option> <option value="title03">title03</option> </select> <div id="direction"></div> <div id="direction"></div> </form> </body> </html>
- ベストアンサー
- JavaScript
- これは何をするスクリプトですか？
<head> <script type="text/javascript"> <!-- function loading() { if (document.getElementById){ document.getElementById('load').style.visibility = 'hidden'; } else { if (document.layers){ document.layers['load'].visibility = 'hidden'; } else { document.all('load').style.visibility = 'hidden'; }}} // --> </script> </head> <body onload="loading()"> 詳細は略して書いています。 プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。 皆様には簡単かとは思いますが、よろしくお願いします。
- ベストアンサー
- JavaScript
- div要素を滑らかに動かしたい
<div id="div1" class="div1" onclick="init();">move box</div> 上記のようなdiv要素を、画面右方向へ滑らかに 動かしたいのですが、どのようなscriptを記述すればよいでしょうか？ setIntervalを使って0.5秒毎に1ピクセル右に移動、 というのを期待して以下のようなscriptを書いてみたのですが、 うまく動作しませんでした。 function init(){ setInterval(moveY, 500); } function moveY(){ var obj = document.getElementById("div1"); obj.style.left = obj.style.left+1 + "px"; }
- ベストアンサー
- JavaScript
- javaスクリプトが表示されない。
javaスクリプトが表示されない。 初めまして。 現在ホームページビルダー１０でホームページを作っています。 写真をランダムに表示させるjavaスクリプトを作ったのですが、プレビューではちゃんと表示されるのですが、 ウェブでのプレビューや、サーバーにアップロード（さくらインターネットです）すると、 まったく表示されません。 初心者なのでどうしていいかわからず困っています。 どなたかわかる方がいらっしゃいましたら、ぜひ教えてください。 よろしくお願いします。 ちなみに、このソースを書き込んでいます。 ↓ <script language="JavaScript"><!-- myImageCnt = 12; myImage = new Array(); myRnd = Math.floor(Math.random()*myImageCnt); document.write("<img src='",myImage[myRnd],"' border='0' >"); // --></script></DIV>
- 締切済み
- その他（インターネット・Webサービス）
- [Javascript]対象クリックでランダムコメ
以前こちらの質問をしました。 http://okwave.jp/qa/q7175498.html 画面にコメントがランダムで表示できるようにしたいのですが、今回は、画像をクリックしたらランダムコメントを表示したいと考えています。 ランダムコメントのやり方は、リンク先のNo４の方のやり方を使用させていただきました。 以下、このようにやってみたというソースです。 function f_ouch() { var comment = [ 'なるほど', '賛成', 'そう思いません。' ]; var length = comment.length; var target = document.getElementById ('comment'); var flag = false; var random = Math.random; var memory = null; return function () { var r; if (! flag) { target.style.visibility = 'visible'; flag = true; } do { r = random () * length |0; } while (r === memory); target.firstChild.nodeValue = comment[r]; memory = r; }; } 以上がランダムコメントをする処理です。 <section id="sample2" style="visibility:hidden; position:absolute; left:0px; top:100px;" onclick="f_ouch();"> <img src="GAZOU.gif" width="50" height="50" /> </section> このように、画像を設定し、onclickでコメントが表示されるようにしたいのですが、どうもうまく行きません。 原因がわかる方、ご回答お願いします。
- ベストアンサー
- JavaScript
- 続き] divの背景画像を、徐々に表示させるには？
トップページの２つのdivボックスの背景画像を、徐々に表示されるようにするjavascriptを作って頂いたのですが、リピートをやめる方法を御教えいただくのを忘れてしまいました！ （http://oshiete1.goo.ne.jp/qa3921804.html） リピートをとめるには、下記ソースをどのようにすればよろしいでしょうか？ ------------------------------------------------------------ fade.js ------------------------------------------------------------ var after = 10; // 秒数を指定 var tid1; var tid2; window.onload = function () { fdi2(); tid2=window.setInterval("fdi2()", after*1000); }; function fdi2() { var img1 = document.getElementById("limg"); img1.style.visibility = "visible"; fadeIn("limg", 0); var img2 = document.getElementById("rimg"); img2.style.visibility = "visible"; fadeIn("rimg", 0); } function fadeIn(imgId, opacity) { if (opacity <= 100) { setOpacity(document.getElementById(imgId), opacity); opacity += 10; tid1=window.setTimeout("fadeIn('" + imgId + "'," + opacity + ")", 80); } else { window.clearTimeout(tid1); } } function setOpacity(img, opacity) { img.style.filter = "alpha(opacity:" + opacity + ")"; img.style.KHTMLOpacity = opacity / 100; img.style.MozOpacity = opacity / 100; img.style.opacity = opacity / 100; }
- ベストアンサー
- JavaScript
- 特定のものにだけスクリプトを有効にする
今晩は。JavaScript初心者です。 今、雪を降らせるスクリプトを作っています。 外部のjsファイルに記述したスクリプトを、特定のidを付けたdivにだけ有効にしたいです。 -----html------------------------------ <html> <head> <script type="text/javascript" src="js/snow.js"></script> </head> <body> <div id="snow"> </div> </body> </html> -----JavaScript(snow.js)------------------------------ sx = new Array(); sy = new Array(); sp = new Array(); num = 50; scrnx = 100; scrny = 500; function snowWrite() { styl = "<img src='snow.gif' style='position:relative;width:6px;height:6px;z-index:3;top:"; for (i=0; i<num; i++) { sx[i] = Math.floor(Math.random()*100); sy[i] = Math.floor(Math.random()*500); sp[i] = Math.floor(Math.random()*5) + 1; document.write(styl+sy[i]+"px;left:"+sx[i]+"px;' name='snow"+i+"'>"); } } function moveSnow() { for (i=0; i<num; i++) { sy[i] += sp[i]; if (sy[i] > scrny) sy[i] = -10; document.images["snow"+i].style.top = sy[i]; } } snowWrite(); 「document.getElementById」あたりかなと思ったのですが、それだとして（まったく見当違いかもしれませんが）、どこにどう記述してよいのかわかりません。 ご存知の方がいらっしゃいましたら、ご教授いただきたいです。 よろしくお願い致します。
- 締切済み
- JavaScript
- hiddenを使って項目の表示、非表示を切り替えたいのですが
素人ですので、質問がクリアでないかもしれませんが宜しく御願い致します。 <---A---><--B--><-C-><--D-->といった形で表示されているものを、例えばBとCを非表示にして <---A---><--D-->のように表示する又はAとCを非表示にして <--B--><--D-->といった形で表示出来ないでしょうか <div class="A">A <div class="B">B <div class="c">C <div class="d">D 以下やってみたのですが <script type="text/javascript"> function hidden_Disp() { document.getElementById("B").style.visibility = "hidden"; document.getElementById("C").style.visibility = "hidden"; } </script> でやってみましたが駄目です。 何卒宜しく御願い致します。
- ベストアンサー
- JavaScript
- スクリプトの入れ方で教えて下さい
文字（例：あいうえお）にマウスを重ねると画像が表示されるスクリプトを以下のように書き込みました。 一箇所はこの通りで正常にできたのですが、同じページ内に数箇所同じスクリプトを有効にさせるためにはどうしたらよいのでしょうか？ また、以下のスクリプトの場合で画像が表示される位置を指定したいのですが 可能でしょうか？（右側に表示・・・等） よろしくお願いいたします。 <script language="javascript"> <!-- function changeVis(obj, visible) { document.all(obj).style.visibility=(visible?"visible":"hidden") } //--> </script> <P align="center"><FONT size="2"> <A HREF="#" onMouseMove="changeVis('image', true)" onMouseOut="changeVis('image', false)">あいうえお</A> </F></P> <IMG SRC="画像.gif" STYLE='visibility:hidden' id='image'></DIV>
- ベストアンサー
- JavaScript
お礼
ありがとうございました。