JavaScriptで複数表示させたい方法とは？
- JavaScriptを使用して、複数の要素を一度に表示させる方法について知りたいです。
- 指定した要素を繰り返し表示する方法を教えてください。
- idを省略して要素を表示させる方法や、他の追加記述についても教えていただけると助かります。
- ベストアンサー
１つの処理で複数表示させたい
window.onload = function() { document.getElementById('st'); } 処理結果の表示として、<body><p id="st"></p></body> これを１０回ほど表示させたいのですが方法がわかりません。 document.getElementById('st1'); document.getElementById('st2'); ： <p id="st1"></p> <p id="st2"></p> ： これでやればid毎に表示はさせる事で表示できましたが、 これを省略しての処理方法や他の追加記述等ありましたらご教授頂けたらと思います。 よろしくお願いいたします。
- coinstar
- お礼率100% (6/6)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
出力するのではなくて、各要素を取得したいものだとすると。 getElementById()の引数は文字列ですので、'st' ＋ 連番とすればいいのではないでしょうか。 window.onload = function() { for (var i = 1; i < 10; i++) { var key = 'st' + i; alert(document.getElementById(key)['id']); } } 的外れでしたらすみません。。
その他の回答 (1)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 質問を読み違えてたら申し訳ございません。 以下のようにすれば<span id="dispText"></span>に<p id="st0">～<p id="st9">までが追加されます。 // インデントは全角スペースになっています // 途中のタグは省いてます window.onload = function() { var parElm = document.getElementById ( 'dispText' ); for ( var i = 0; i < 10; i ++ ) { var elm = document.createElement ( 'p' ); elm.id = "st" + i; elm.innerHTML = "id = " + elm.id; parElm.appendChild ( elm ); } } <span id="dispText"></span> 何をどうしてどのように表示したいか明確になれば他の案が出せると思います。
お礼
遅くなりました。 ご返答ありがとうございます。 目的としては、複数の文字をランダムに選び、特定の個数をｓｔに連結し表示させるものを作成しております。 その表示させるものをブラウザ上にstでの処理結果を10個表示出来ればと考えていました。 言葉不足で申し訳ございませんでした。 whileで一気に１０個表示させることは可能でしょうか。
関連するQ&A
- 引数を持つコールバック関数をonloadで複数実行
下記のような内容で、指定したidを持つ要素に新しい内容を追加したいのですが、この内容だとcontent2のidを持つdiv要素にしか内容が追加されません。 そこで、対象となるidを持つ要素をいくつ追加しても反映されるようにしたいのですが、これを実現するにはどうしたら良いでしょうか？ アドバイス等、何かしらお力添えを頂ければ幸いです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Title</title> <script type="text/javascript"> // </body>直前には置きたくない // 指定したidを持つ要素に新たな内容を追加する関数 function ins( id ) { var output = document.createElement( 'span' ); output.innerHTML = '<p>content</p>'; // 追加する内容はhtmlやjavascriptなど必要に応じて変化する var element = document.getElementById( id ); element.appendChild( output ); } window.onload = function() { ins( 'content1' ); } window.onload = function() { ins( 'content2' ); } </script> </head> <body> <div id="content1"></div> <!-- window.onloadではins( 'content2' );に上書きされてしまう --> <div id="content2"></div> <!-- <div id="content3"></div> <div id="content4"></div> ... いくつ追加しても対応出来るようにしたい --> </body> </html>
- ベストアンサー
- JavaScript
- 同じメソッドを複数回、呼び出しは可能でしょうか
<script> var arg = new Object, p = location.search.substring(1).split('&'); for(var i=0; p[i]; i++){ var kv = p[i].split('='); arg[kv[0]] = kv[1]; } window.onload = function (){ if(01 == arg.id){document.getElementById("type").innerHTML = "あなたはＡ型";} else if(02 == arg.id){document.getElementById("type").innerHTML = "あなたはＢ型";} else if(03 == arg.id){document.getElementById("type").innerHTML = "あなたはＯ型";} else if(04 == arg.id){document.getElementById("type").innerHTML = "あなたはＡＢ型";} else {document.getElementById("type").innerHTML = "わかりません";} } </script> サイトへの表示は <span id="type"></span> と記述することで、問題なく表示ることができています。 しかし、これを複数個所に記述すると 最初の箇所しか表示しません。 同じページの複数の箇所（希望は４か所）に表示させるためには、 どのようにすればよいのでしょうか。
- ベストアンサー
- JavaScript
- リアルタイムに時計を表示するときのsetIntervalについて
いつもお世話になっています。 いつも以上に稚拙な質問で申し訳ないのですが、ご助力願います。 <html> <head> <script type="text/javascript"> <!-- var today = new Date(); window.onload = function dispTime(){ document.getElementById("showTime").innerHTML = today.getFullYear() + "/" + (today.getMonth()+1) + "/" + today.getDate() + " " + today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds(); setInterval('dispTime()',1000); } //--> </script> </head> <body> <div id="showTime"></div> </body> </html> できるだけ<body onload="">を使いたくないので、window.onloadにしてあります。 イメージとしては、document.getElementById("showTime").innerHTMLでshowTimeに時間が表示され、setIntervalで再度disptimeが呼ばれ、という無限ループになればよいと考えてこのソースになりました。 ただ現状は、ロード時に時刻が表示され、そのまま動きません。 たぶんsetIntervalの場所とか使い方がおかしいような気がするのですが、どうもよくわかりません。 参考にしたサイトによってsetInterval("dispTime()"...だったり setInterval("disptime"...だったりと記述がバラバラで、 ほとんどのところでは、body onload="setInterval("...とonload扱いでした。 body onloadは使わずに、1秒ごとに動く時刻表示をするには、どこを直せばよいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- なぜfunc()で動き、funcで動かないのか。
以前良く似た質問をしましたが、また疑問点が出たので質問します。 前回は、以下のコードでなぜonload = funcで動作し、onload = func()では動作しないのかをお聞きしました。 var img = new Image(); window.onload = function() { img.onload = func; } function func() { （省略） } その結果、funcだと関数を指定し、func()だと関数の返り値を代入するという答えを頂きました。 しかし自分で実験してみたところ、以下のコードでは逆の結果になりました。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { document.getElementById("result1").innerHTML = "result1"; } function result2() { document.getElementById("result2").innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> onload = result2()の方は期待通りの結果が得られましたが、onload = result1ではdiv要素に文字列は挿入されませんでした。onloadによって実行される関数をfunc形式で指定したのになぜ動作せず、func()形式のもののみ動作したのでしょうか？ あと蛇足になりますが、このようなコードも試してみましたが、どちらもうまくいきませんでした。 window.onload = function() { document.getElementById("result1").onload = result1; document.getElementById("result2").onload = result2(); } function result1() { this.innerHTML = "result1"; } function result2() { this.innerHTML = "result2"; } <div id="result1"></div> <div id="result2"></div> 両方のfunction内のthisはdocument.getElementById("result1")またはdocument.getElementById("result2")を指すのではないのでしょうか？
- ベストアンサー
- JavaScript
- javascript外部ファイル化の複数指定の質問です。
javascript外部ファイル化の複数指定の質問です。 一つ目 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} 二つ目 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ window.onload = function() { document.getElementById("home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; document.getElementById("sub_home").onmouseover= function() {document.getElementById("sub_home").style.display="block"}; document.getElementById("sub_home").onmouseout= function() {document.getElementById("sub_home").style.display="none"}; } この上記の２つのjavascriptを別々に外部ファイル化して、head内に読み込んでおります。 両方とも動作させたいのですが、下のwindow.onload のjavascriptしか動作しません。 両方、動作させるには、どのように記述すればよいのでしょうか？ どなたか教えていただけませんか？ よろしくお願い致しますm(＿ ＿)m
- 締切済み
- JavaScript
- <body onload=""> と window.onload
JavaScriptのonload処理についての質問です。 現在Java、JSP、JavaScript等でWebアプリケーションを作成しているのですが、 bodyタグ中のonloadに記載したファンクションが時々呼ばれないという問題が起きています。 （こんな感じで記述 <body onload="hoge();hogehoge();"> hogehoge()がたまに呼ばれないことがある・・・） これを回避する方法として、「onload処理をwindow.onloadに記述すれば良い」 という話を聞きました。 （こんな感じで記述 <script> window.onload = function(){ hoge();hogehoge(); } </script> ） 「bodyタグ中に記述するとたまに呼ばれないものが、window.onloadに記述すると確実に呼ばれる」 なんてことがあるのでしょうか？ 「２つめのファンクションが呼ばれない」という現象がたまにしか発生しないので、 window.onloadに記述する方法で確実に呼ばれるようになったという保証がとれません。 知識として知っている方がいれば是非教えていただきたいです。 よろしくお願い致します。 ※ブラウザはIEを使用 バージョンは IE → 6.0 JavaScript → 1.1 です。
- 締切済み
- JavaScript
- 下記コードの実行方法について質問です。
問題のコードは下記ですが、 bodyタグに onLoad="firstFunc()" と書かずに実行したいのですが、 スマートな方法はないでしょうか？ よろしくお願いいたします。 <script type="text/javascript"> function firstFunc(){ var aFunc = document.getElementById('btn'); aFunc.onclick = function(){ alert('りんご'); } } </script> </head> <body onLoad="firstFunc()"> <button id="btn" name="ボタン">getElementByIdでonclickのイベントを追加できる。</button> </body>
- ベストアンサー
- JavaScript
- 複数のtextareaの保存について
下記のコードのようにtextareaが二つあったとします id="a"は保存できましたがid="b"はどうやって保存するのでしょうか？("a", "b")としても無理でした どのようにすれば複数保存できるのでしょうか？ ご回答お願いします <html> <head> </head> <body> <textarea id="a"></textarea> <textarea id="b"></textarea> <script> var a = document.getElementById("a"); window.onload = function() { var body = localStorage.getItem("a"); if (body != null){ a.value = body; } }; a.onchange = function() { localStorage.setItem("a",a.value); }; </script> </body> </html>
- ベストアンサー
- JavaScript
- 1ページ内で複数のwindow.onload = functionの動作
Ajaxを使用して取得してきたRSSをinnerHTMLで表示するスクリプトを1ページ内に複数設置したいのですが、うまくいきません。 prototype.jsを使うと複数のonloadを制御できるという記事を参考にしたのですが、動作しませんでした。（WindowsIE6で検証してます） http://hori-uchi.com/archives/2005_09.html BODY以下のソースはこちらです。現状だとどちらか一つだけなら動作する感じです。これをどちらも動作する方法をご教授いただけませんでしょうか。宜しくお願いします。 //RSS取得1箇所目 <div id="p1">roading1</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://###"; } var xml = {}; xml.onload = function(data){ var items1 = data.items; var g = "\n"; for(var i = 0; i < Math.min(items1.length, 20); i++){ // } document.getElementById("p1").innerHTML = g; } </script> //RSS取得2箇所目 <div id="p2">roading2</div><script> window.onload = function(){ var u = document.getElementsByTagName("head")[0].appendChild(document.createElement("script")); u.type = "text/javascript"; u.charset = "utf-8"; u.src = "http://***"; } var xml = {}; xml.onload = function(data){ var items2 = data.Result; var h = "\n"; for(var i = 0; i < Math.min(items2.length, 20); i++){ // } document.getElementById("p2").innerHTML = h; } </script>
- ベストアンサー
- JavaScript
- 毎日違う画像を表示させるには
私はJavaScriptは初心者です。悩んでここに投稿させて頂きました。 JavaScriptで毎日（24時間ごとに）違う画像を表示させようと考えています。 以下を実行したのですがIEだけ画像が表示されません。 どなた様か、おかしいところ、また違うJavaScriptの記述でも構いません。 教授いただけると幸いです。 <SCRIPT LANGUAGE=javascript> <!-- var ig = new Array(); ig[1]="1.jpg"; ig[2]="2.jpg"; ig[3]="3.jpg"; ig[4]="4.jpg"; ig[5]="5.jpg"; ig[6]="6.jpg"; ig[7]="7.jpg"; function window_onload() { var d = new Date(); img = document.getElementById("img"); window.status=d.getMonth()+1 + "/"+d.getDate() + "/"+ d.getYear(); var no = d.getDate()%7; img.src=ig[no]; img.insertAdjacentHTML("afterEnd",no+"："+ig[no]); } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onload="return window_onload()"> <P><img id=img></P> </BODY>
- ベストアンサー
- JavaScript
お礼
遅くなりました。 ご返答ありがとうございます。 言葉不足で申し訳ございません、今回の目的としては、ブラウザ上で１０個を表示させることを考えていました。 ご教授頂きました記述を試し、各stに割り振りが出来ましたが、 全て表示させるには各p要素に割り振りをすることで全て表示することが出来ました。 度々で申し訳ございません、p要素についてですが、これを1ずつ割り振りするほかに10個同時に処理する方法はありますでしょうか。