数字部分だけをアラートで出したいのですが、配列baguruが反応しません。何が悪いのでしょうか。
- 配列baguruが反応しないため、数字部分だけをアラートで表示することができません。
- JavaScriptの配列baguruに問題があるため、数字部分のみをアラートで出力することができません。
- ブラウザのアドレスバーを使用して数字部分をアラート表示しようとしていますが、配列baguruが機能していないため、期待した結果が得られません。
- ベストアンサー
何が悪いのでしょうか。
<html> <head> <title>たいとる</title> <script> baguru = new Array(); window.onload=function(){ var tags=document.getElementsByTagName("*"); for(var i=0;i<tags.length;i++){ matti = tags[i].id.match(/^test[0-9]+$/) if(matti){ baguru.push(matti); } } } xx = new Array(),xx[0]="test123",xx.push('test30'),xx.push('test200','test1'),str=xx[1]; yy = new Array("disp1", "disp200", "disp30"),stl=yy[1]; </script> </head> <body> <div id="test123">TEST123</div> <div id="test30">TEST30</div> <span id="test200">TEST200</span> <div id="test1">TEST1</div> <div id="hoka123">HOKA123</div> <hr> アドレスバーでTEST用。 <pre> javascript:alert(xx[1].match(/disp(\d+)$/)[1]); javascript:alert(yy[1].match(/disp(\d+)$/)[1]); javascript:alert(baguru[1]);//中身はある javascript:alert(baguru[1].match(/disp(\d+)$/)[1]);//反応無し </pre> <pre> javascript:alert(xx); javascript:alert(yy); javascript:alert(baguru); </pre> </body> </html> 数字部分だけをアラートで出したいのですが、配列baguruが反応しません。何が悪いのでしょうか
- xindex
- お礼率90% (10/11)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
baguruの配列の中身が数値として記録されているためにおこります なので javascript:alert((baguru[1]+'').match(/test(\d+)$/)[1]); のようにして+''を付加し文字列として参照すればOK！
その他の回答 (1)
どの時点でalertしたいのか判りませんが、 onloadする前に、baguruを参照しているのでは？
お礼
回答ありがとうございます。 質問のソースは変更ミスがありましたので こちらの訂正版http://okwave.jp/qa4463809.html のソースをそのまま貼り付けて アドレスバーでTEST用。 のjs、 javascript:alert(baguru[1]);とするとbaguru[1]の中身は表示される javascript:alert(baguru);も表示される javascript:alert(baguru[1].match(/disp(\d+)$/)[1]);だとなぜかうまくいかない。 onload後の話です。
関連するQ&A
- 【短い】1つだけ展開/表示/非表示/開閉【Javascript】
このスクリプト、もっと短くなりませんか？ idがdisp0,disp20などdisp+数字になっているものを開閉するスクリプト。 動作：対象を開き他を閉じる、対象が開いていた場合対象を閉じる。 条件：連番（0から順番）じゃなくても（0,1,2,7みたいに飛んでも）動作する。 <html> <head> <title>1つだけ展開/表示/非表示/開閉</title> <script> //idがdisp+数字のものを格納 var kakunou = new Array(); window.onload=function(){ var tags=document.getElementsByTagName("*"); for(var i=0;i<tags.length;i++){ if(tags[i].id.match(/^disp[0-9]+$/)){ mituketa=tags[i].id.match(/^disp[0-9]+$/); kakunou.push(mituketa); } } } //開閉処理部分 function disp(tage) { for(i=0;i<kakunou.length;i++){ cb = document.getElementById(kakunou[i]).style; if(kakunou[i]==tage){ if (cb.display == 'none') cb.display = "block"; else cb.display = "none"; } else { cb.display = 'none'; } } } </script> </head> <body> <a href="javaScript:disp('disp1')">＋</a>■検索サイト１<br> <div id="disp1" style="display:none"> ├<a href="http://www.yahoo.co.jp/">Yahoo!</a><br> ├<a href="http://www.goo.ne.jp/" >Goo</a><br> └<a href="http://www.lycos.co.jp/">Lycos</a><br> </div> <a href="javaScript:disp('disp200')">＋</a>■検索サイト２<br> <div id="disp200" style="display:none"> ├<a href="http://www.infoseek.co.jp/">Infoseek</a><br> ├<a href="http://www.google.com/" >Google</a><br> └<a href="http://kids.goo.ne.jp/">Kids Goo</a><br> </div> <a href="javaScript:disp('disp30')">＋</a>■検索サイト３<br> <div id="disp30" style="display:none"> ├<a href="http://www.excite.co.jp/">Excite</a><br> └<a href="http://www.msn.com/" >MSN</a><br> </div> </body> </html>
- ベストアンサー
- JavaScript
- onclickで表示/非表示させている動きに、別ページからリンクさせるには
JavaScript初心者です。 A.htmlを作成し、リンクをクリックするとidとnumberを呼び出すことで、同じhtml内に存在する3つのページが1つだけ表示されるように、cssとJavaScriptで表示/非表示させています。 【JavaScript】 function Page(id, nu){ Num = new Array ('01', '02', '03'); for (i=0; i<3; i++) { if(Num[i] == num){ document.getElementById(id + Num[i]).style.display = "block"; } else { document.getElementById(id + Num[i]).style.display = "none"; } }; } 【CSS】 #test01 {display:block;} #test02 {display:none;} #test03 {display:none;} 【html】 <a href="javascript:void(0);" onclick="Page('test','01')">link1</a> <a href="javascript:void(0);" onclick="Page('test','02')">link2</a> <a href="javascript:void(0);" onclick="Page('test','03')">link3</a> <div id="test01"> ・・・ </div> <div id="test02"> ・・・ </div> <div id="test03"> ・・・ </div> このとき別のhtml(B.html)から、A.htmlのid="test02"が表示された状態にリンクを作成することはできるのでしょうか？ 恐れ入りますがよろしくお願い致します。
- ベストアンサー
- JavaScript
- HTMLDivElement等の比較、評価について
記述の HTML コード div、p タグに、同じクラス属性値 abc が付いています。 あくまで例として記述したものですが クラス属性値 abc で div の場合はアラート OK! が表示されるようにしたいのですが、if 中で、div=[object HTMLDivElement]とでは、違う為、 アラート OK!とはなりません。 どのようにすれば if 中で評価出来るようになりますでしょうか ? みなさま、どうぞご回答よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>Test</title> </head> <body> <div class="abc"></div> <p class="abc"></p> <script> var tags = document.getElementsByClassName( 'abc' ); var targetTags = 'div'; for( i = 0; i < tags.length; i++ ) { if( targetTags.indexOf( tags[i] ) == 0 ){ alert( 'OK!' ); } } </script> </body> </html>
- ベストアンサー
- JavaScript
- 要素がひとつの配列は問題ありますか？
DIVを全て非表示にし、display_listにあるものを表示させる事をしようとしています。 しかし、display_listに入れる配列の要素が一つしかないところでundefinedが出てしまい上手く行きません。 要素が一つの配列は問題ありますでしょうか？ どうすれば上手く行くようになりますでしょうか？ <html> <head> <script type="text/javascript"> var cat_list = ['media_type','print_type','option_opp','option_setup']; var display_list = new Array(); display_list['media_type'] = new Array(1,2); display_list['print_type'] = new Array(1,2); display_list['option_opp'] = new Array(1); display_list['option_setup'] = new Array(1); var item_list = new Array(); item_list['media_type'] = new Array('media_type_cd','media_type_dvd'); item_list['print_type'] = new Array('print_type_inc','print_type_thermo'); item_list['option_opp'] = new Array('option_opp'); item_list['option_setup'] = new Array('option_setup'); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready( function(){ for(var i=0; i<cat_list.length; i++){ //alert(cat_list[i]); for(var j=0; j<item_list[cat_list[i]].length; j++){ //alert(j); //alert(cat_list[i]); //alert(item_list[cat_list[i]][j]); $('#'+item_list[cat_list[i]][j]).hide(); } } for(var i=0; i<cat_list.length; i++){ //alert(cat_list[i]); for(var j=0; j<display_list[cat_list[i]].length; j++){ //alert(j); //alert(cat_list[i]); //alert(display_list[cat_list[i]][j]); //alert(item_list[cat_list[i]][display_list[cat_list[i]][j]-1]); $('#'+item_list[cat_list[i]][display_list[cat_list[i]][j]-1]).show(); } } }); </script> </head> <body> <div id="media_type_cd">media_type_cd</div> <div id="print_type_inc">print_type_inc</div> <div id="option_opp">option_opp</div> <div id="option_setup">option_setup</div> </body> </html>
- ベストアンサー
- JavaScript
- JavascriptでValueを変えるには
再び質問致します。getElementByIdを前回の質問から学ばせて頂きました。やりたいことはTagの値の変更です。 以下のスクリプトでgetElementByIdはアラートが出ますので存在し値もあっている訳ですが代入が出来ません。ReadOnlyをはずしても駄目です。何かが間違っていると思います。宜しく御願い致します。 <html> <head> <title>エレメントの表示</title> </head> <script type="text/javascript"> function Disp_change() {function SchDefult_Disp_change() { alert("in1"); if (document.getElementById("SchDefult").value == 'Only For' ) { alert( "必須入力です " )}; SchDefult.value = "in1"; SchDefult = "in1"; } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2 " type="text" id="SchDefult" name="parent" value="Only For"> </div> <script type="text/javascript"> Disp_change(); }; </script>
- ベストアンサー
- Java
- 初心者です。
初心者です。 すごく単純なことかもしれませんが、教えて下さい。 document.writeでdiv idの中身を取り出してみました。 それで並び変えてまた表示させたいと思っています。 最初は return を使って関数を呼び出してみましたが、受け取れず・・・ なんか難しいので、とりあえず以下のプログラムで画面に表示さえすれば あとはインフレームなどで対応しようかと思いました。 しかし、出力結果が一行しか表示されません。 アラートで出力すると、順番に表示されるのですか。 どなたか宜しくお願いします。 <script type="text/javascript"> function yomikomi(){ var selectObj = new Array(); var parents = new Array(); //配列を読み込む parents=Item(); //日付順にする alert(parents); parents.sort(); alert(parents); //return parents; for(i=0; i < parents.length; i++){ //ID_ だけ削除する。 if(parents[i]=='ID_'){ delete parents[i]; parents.splice([i],1); } selectObj[i] = document.getElementById(parents[i]); //小窓で確認 alert(selectObj[i].innerHTML); //★問題の箇所 画面には１行しか表示されない。 document.write(selectObj[i].innerHTML); } } </script> <script type="text/javascript"> function Item(){ var parents = Array( 'ID_' ,'201008012' ,'201007161' ); return parents; } </script>
- ベストアンサー
- JavaScript
- 配列に代入したエレメントを操作できない（変数のスコープの問題でしょうか？）
ページ上に複数のブロックを配置しています。ひとつにマウスオーバーすると枠の色が赤くなり、他のものの枠の色がグレーになるようにします。 以下にソースを記します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <title>array</title> <style type="text/css"> div { width: 50%; margin: 5px; padding: 5px; border: 3px solid #bbb; } </style> <script type="text/javascript"> <!-- var blockArr = new Array(); blockArr.push('First'); blockArr.push('Second'); blockArr.push('Third'); blockArr.push('Fourth'); blockArr.push('Fifth'); var blocks = new Array(); function init() { for (var i=0; i<blockArr.length; i++) { var theName = blockArr[i]; blocks[i] = document.getElementById('block' + theName); blocks[i].onmouseover = function() { for (var ii=0; ii<blockArr.length; ii++) { if (i==ii) { // nothing } else { blocks[ii].style.border = '3px solid #bbb'; } } blocks[i].style.border = '3px solid red'; // ←←← 変更箇所 }; } } window.onload = init; //--> </script> </head> <body> <div id="blockFirst">1</div> <div id="blockSecond">2</div> <div id="blockThird">3</div> <div id="blockFourth">4</div> <div id="blockFifth">5</div> </body> </html> FireFox2で表示したところ、これでは blocks[i] has no properties というエラーが出て動作しません。 試しに『// ←←← 変更箇所 』の行の宣言を『this.style.border = '3px solid red';』と this に変えてみたら動作しました。 しかしなぜ blocks[i] で動作しないのでしょうか。
- ベストアンサー
- JavaScript
- JavascriptでInputClassの表示を変えるには
以下のScriptを作りました。Tagの表示情報をScriptで変更したいのです。以下のdiv class="inC1"は変更されます。input class="inIPC2も変更したいのですが、どうもやり方が異なるようです。 申し訳ありませんがご教授願います。 <html> <head> <title>エレメントの表示</title> </head> <body> <script type="text/javascript"> function Disp_change() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inC1") div[i].innerHTML = "change1"; i++; } } function Disp_change_Class() { var i = 0, div = document.getElementsByTagName("DIV"); while (div[i]) { if (div[i].className=="inIPC2") div[i].innerHTML = "change2"; i++; alert ("change2"); } } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2">連絡情報</div> </div> <script type="text/javascript"> Disp_change(); Disp_change_Class(); }; </script> </script> </body> </html> 一応動きますので確認してみてくだされば幸いです。 以上、宜しく御願い致します。
- ベストアンサー
- Java
- Arrayオブジェクトとforms配列
以下のスクリプトを実行すると、(2)の所で「document.forms.GetFromArray is not found」 のエラーとなります。（ブラウザはFirefox）。 意図としてはArrayオブジェクトをカスタマイズして追加したGetFromArray()メソッドでforms配列を操作したいのですが．．． エラーメッセージからすると、「document.formsは配列(Arrayオブジェクト)では無い」と言っているようです。 この方法でforms配列を参照する方法を教えて下さい。 あるいは、Arrayオブジェクトではない、他のオブジェクトをカスタマイズするのでしょうか？お願いします。 <html> <head> <script type="text/javascript"> <!-- Array.prototype.GetFromArray=function(func){ for(var i=0;i<this.length;i++){ func(this[i]); } } function disp1(h){ alert(h); } function disp2(h){ alert(h.name); } function run(){ var array=new Array('dog','cat','fish'); array.GetFromArray(disp1); //(1) ＯＫ document.forms.GetFromArray(disp2); //(2) エラー } //--> </script> </head> <body> <form name="test"> <input type="text" name="bunrui" value="分類">/ <input type="text" name="detail" value="詳細">/ <input type="button" value="実行" onClick="run();"> </form> </body> </html>
- ベストアンサー
- JavaScript
- JSON形式のデータを古い順に３０件表示させたい
PHPからJSON形式のデータを受け取り、データの古い順に３０件、htmlで表示させたいです。 いろいろ調べて１件目のデータを表示させることができたのですが 30件分のデータを古い順に表示させることができません。 わかりやすく教えていただけないでしょうか？ ※やりたいこと html内に <div class="area_report" id="area_100000"></div> <div class="area_report" id="area_200000"></div> <div class="area_report" id="area_300000"></div> ・ ・ ・ 最高１０件のエリアＩＤが書かれています。 "area_"をreplaceしてエリアＩＤを取得します。 売上報告.phpにアクセスし、エリアＩＤごとにJSON形式のデータを受け取ります。 １つのエリアＩＤに店舗は１～複数あります。 店舗ごとの古いデータから３０件、htmlで表示させたいです。 店舗がいくつあるかは"Tenpo"でわかります。 データの登録日は"UpDate"でわかります。 店舗が１００件あると、表示完了までに時間がかかり過ぎるのであれば 何か良いアドバイスをいただきたいです。 javascript勉強中で不適切な記述をしているかもしれません。 「こちらの記述の方が簡単だよ」というのがありましたら、ぜひ教えてください。 どうぞよろしくお願いします。 ※JSON形式のデータ {"AreaReport":{ "AreaId":"100000", "Tenpo":4, "Sales":[ {"Name":"岡崎", "TenpoId":100004, "Direct":0, "Amount":48000, "Report":"売り上げ報告あいうえお", "UpDate":"2011-04-30 10:32:40"}, {"Name":"一宮", "TenpoId":100001, "Direct":0, "Amount":30000, "Report":"売り上げ報告かきくけこ", "UpDate":"2011-04-12 10:32:40"}, {"Name":"春日井", "TenpoId":100002, "Direct":0, "Amount":10000, "Report":"売り上げ報告さしすせそ", "UpDate":"2011-04-01 10:32:40"}, {"Name":"名古屋", "TenpoId":100003, "Direct":1, "Amount":50000, "Report":"売り上げ報告たちつてと", "UpDate":"2011-04-21 10:32:40"}, ]}} ※javascriptコード <script type="text/javascript"> if( window.attachEvent ) { window.attachEvent( 'onload', reportWrite ); } else { window.addEventListener( 'DOMContentLoaded', reportWrite, false ); } function reportWrite() { var area_array = new Array(); t = document.getElementsByTagName( 'div' ); for( var i = 0, n = t.length; i < n; i ++ ) { if( t[ i ].className.match( 'area_report' ) ) { var area_id = t[ i ].id.replace( 'area_', '' ); area_array.push( area_id ); } } for( var i = 0; i < area_array.length; i ++ ) { areaReport_id = area_array[ i ]; ReportGet( areaReport_id); } } function include_javascript( js_file ) { //window.alert(js_file); var script = document.createElement( 'script' ); script.src = js_file; script.type = 'text/javascript'; script.defer = true; document.getElementsByTagName( "head" )[ 0 ].appendChild( script ); } function ReportGet( areaReport_id) { include_javascript( 'http://売上報告.php?id=' + areaReport_id + '&callback=printReport' ); } function printReport(Repo) { var htmlStr = ""; htmlStr = htmlStr + Repo["AreaReport"]["Sales"][0]["UpDate"] + '<br />'; htmlStr = htmlStr + Repo["AreaReport"]["Sales"][0]["Name"] + '<br />'; htmlStr = htmlStr + Repo["AreaReport"]["Sales"][0]["Direct"] + '<br />'; htmlStr = htmlStr + Repo["AreaReport"]["Sales"][0]["Amount"] + '<br />'; replace_val = Repo["AreaReport"]["Sales"][0]["Report"]; htmlStr = htmlStr + replace_val.replace(/\n/g, '<br />'); htmlStr = htmlStr + '<hr />'; document.getElementById("Report").innerHTML = htmlStr; // window.alert(htmlStr); } </script>
- 締切済み
- JavaScript
お礼
さすがpipi様です。感動です。 数値として記録されていたなんて！（何故 気づきませんでした。ありがとうございました！
補足
では訂正版もこちらに。 <html> <head> <title>たいとる</title> <script> baguru = new Array(); window.onload=function(){ var tags=document.getElementsByTagName("*"); for(var i=0;i<tags.length;i++){ matti = tags[i].id.match(/^test[0-9]+$/) if(matti){ baguru.push(matti); } } } xx = new Array(),xx[0]="test123",xx.push('test30'),xx.push('test200','test1'),str=xx[1]; yy = new Array("test1", "test200", "test30"),stl=yy[1]; </script> </head> <body> <div id="test123">TEST123</div> <div id="test30">TEST30</div> <span id="test200">TEST200</span> <div id="test1">TEST1</div> <div id="hoka123">HOKA123</div> <hr> アドレスバーでTEST用。 <pre> javascript:alert(xx[1].match(/test(\d+)$/)[1]); javascript:alert(yy[1].match(/test(\d+)$/)[1]); javascript:alert(baguru[1]);//中身はある javascript:alert(baguru[1].match(/test(\d+)$/)[1]);//反応無し javascript:alert((baguru[1]+'').match(/test(\d+)$/)[1]);//これでできる！ </pre> <pre> javascript:alert(xx); javascript:alert(yy); javascript:alert(baguru); </pre> </body> </html>