• ベストアンサー

オブジェクトの番号

お世話になります。 JavaScriptでオブジェクトプロパティを取得する。 例えば var obj=document.getElementsByTagName("*"); var len = obj.length; for (var i=0;i<len;i++){   if(obj[i].tagName.match(img)){   ・・・・・・ このときiに入る値は、そのオブジェクトの番号が入っていると思うのですが、 この番号自体のみをあるオブジェクトから取得することはできないものなのでしょうか。 具体的に <img src="・・・" onclick="getObjNo(this)"> function getObjNo(obj){  var objNo=?????  //ここで、imgオブジェクトの番号を取得したいのですが。その方法がわかりません。 } よろしくお願いいたします。

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

  • ベストアンサー
回答No.1

IEであれば、 obj.sourceIndex で取得できますが・・・。 前提がわからりませんが。 アクセスする可能性のあるTagに一意となるidを振って document.getElementById("id") とすれば対応できるのでは?

rqg2010
質問者

お礼

TERIYAKIcomさん、お早うございます。 できました。 ありがとうございました。 >document.getElementById("id") >とすれば対応できるのでは? 言葉足らずで申し訳ありませんでした。 いちいち、id="**" と、しなくても一意の値を取得できないものかと思って調べていました。 もしできましたら、 sourceIndexなどのプロパティー一覧が紹介されているサイトなど教えていただけないものでしょうか。 自分で調べても一向にわかりませんでした。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.2

タグ全体の中の番号なんでしょうか?それともimgの中の番号? いずれにしてもforで回して一致したら番号をリターンしてみては? <script language="javascript"> function getObjNo(obj){ var imgobj=document.getElementsByTagName("img"); for (var i=0;i<imgobj.length;i++){ if(imgobj[i]==obj) return i; } } </script> <img onClick="getObjNo(this)">

rqg2010
質問者

お礼

yambejpさん、お早うございます。 回答ありがとうございます。 質問時の言葉足らずで申し訳ありませんでした。 ちょっと目的が異なります。 目的は、 id="**"などとしなくても、タグの一意的な値を取得することです。

関連するQ&A

  • nullまたはオブジェクトではありません

    どなたかよろしくお願いします。 以下のスクリプトで動作確認中にエラーが表示されます。 13行目「'src'はnullまたはオブジェクトではありません」とでます どうやって直したら良いのかわかりません。 IEの「スクリプトのエラーを表示しない」をすれば 一応希望通りに動くので、問題ないとは思うのですが気になります。 どうすれば解消できるでしょうか。 function setLinkListener () { var links = document.links; for (var i = 0; i < links.length; i++) { var link = links [i]; if (link.linkees) { link.onmouseover = function () { for (var i = 0; i < this.linkees.length; i++) { var linkee = this.linkees [i]; // changePseudoLinkClassName (linkee); if (linkee.tagName == "IMG") changeImage (linkee, linkee.src.replace ("_over.gif", ".gif").replace (".gif", "_over.gif")); if (linkee.tagName == "TD") { var image = linkee.getElementsByTagName ("img")[2]; changeImage (image, image.src.replace ("_over.gif", ".gif").replace (".gif", "_over.gif")); } } }; link.onmouseout = function () { for (var i = 0; i < this.linkees.length; i++) { var linkee = this.linkees [i]; // restorePseudoLinkClassName (linkee); if (linkee.tagName == "IMG") restoreImage (linkee); if (linkee.tagName == "TD") restoreImage (linkee.getElementsByTagName ("img")[2]); } }; } } }

  • javascriptでMYSQLに接続したい

    下記のクリック時に画像を変更するjavascript内で、画像を変更するたびに現在の画像が何かをデータベースに値として格納したいのですがやり方が分かりません。 現在の画像がA.gifだったらデータベースに0を格納、B.gifだったら1を格納するといった仕様です。 どなたかご教授お願いできませんでしょうか? よろしくお願いします。 <script> function change(obj){ var orgimg="B.gif"; var newimg="A.gif"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } </script>

  • いくつか用意したフラッシュ(.swfファイル)を切り替え表示したい

    フラッシュで作成した.swfファイルをいくつか用意し、ホームページ上で切り替わるように表示したいのですが、どなたか詳しい方、教えていただけないでしょうか? 画像の切り替えのソース(以下----部分)を利用してみたのですが、.jpgの部分を.swfに置き換えても、上手く表示されませんでした。 具体的に、ソースを記述していただけると、大変うれしいです。 都合のいい質問ですいません。 よろしくお願いします。 ------------------------------------------- <html> <head> <title></title> <script language="JavaScript"> <!-- var cnt = 0; var dat = new Array("img1.jpg","img2.jpg","img3.jpg","img4.jpg"); prLdImg= new Array(); for (i=0; i<dat.length; i++){ prLdImg[i] = new Image(); prLdImg[i].src = dat[i]; } function nextImg(){ var obj = window.document.all('myImg'); if(timerID){clearTimeout(timerID);} cnt++; cnt %= dat.length; obj.filters.revealTrans.Apply(); obj.src = dat[cnt]; obj.filters.revealTrans.Play(); var timerID = setTimeout("nextImg()",3000); } // --></script> </head> <body> <img id="myImg" src="img1.jpg" style="filter:revealTrans(duration=2,transition=12)" onClick="nextImg()"> </body> </html> -------------------------------------------

  • onClickで指定した以外の画像も変わってしまう

    Youtubeの動画をボタンを使って切り替えるように設定しています。 ========== Youtube動画表示 ========== ボタン1 ボタン2 ボタン3 という感じで配列しています。 ボタン1~3は、それぞれ同じ画像で表示しています。 btn.png:OFF時 btn_on.png:ON時 Javascriptは下記のように書いています。 ================ function change(obj){ var orgimg="img/btn.png"; var newimg="img/btn_on.png"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } }; ================ ボタン部分はそれぞれ下記のようにしています。 ================ <a href="http://www.youtube.com/watch?v=1111111" onclick="return Obj.replaceObject(this.href);"><img src="img/btn_on.png" width="16" height="15" border="0" alt="movie 1" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=2222222" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 2" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=3333333" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 3" onClick="change(this)"></a> ================ これでちゃんとクリックしたボタンのみがON時の画像になり、それ以外はOFF時の画像に戻るのですが 同ページ上に表示している全く関係ない画像(例えばタイトル画像やバナー等)が 何故かOFF時の画像が拡大された状態のもの(タイトルやバナーで指定してあるサイズ)に切り替わってしまいます。 CSSで背景に指定してある画像やボタン設定してある画像は大丈夫なのですが 普通にHTML上に指定してあるJPGやPNG画像が変わってしまいます。。。 どこかおかしな部分があると思うのですがわからず途方にくれております。 何方か教えて下さい。どうぞ宜しくお願いします。

  • クリックして変更した画像を他の画像をクリックしたとき戻すには?

    以前、別で下記のような質問がありました。 ●質問------------------- 複数の同じ画像があるとします。 そのひとつをクリックすると画像が変わるようにします。 その後別の画像をクリックすると先ほどクリックした画像が初期の状態に戻るようにしたいのですが、どのような記述にすればよいのでしょうか? どなたかご教授おねがいします。 ---------------------- 上記の質問を受けての回答が下記のような感じで ●回答------------------- <script> function change(obj){ var orgimg="a.gif"; var newimg="b.gif"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } } </script> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> <img src="a.gif" class="hoge" onClick="change(this)"> ---------------------- これで終わってしまっていたのですが、画像が複数のパターンある場合はどのようにすればよいでしょうか。 例えば 「a1.gif」をクリックすると「a2.gif」に変更するようにして、さらに「b1.gif」というものがあって、クリックすると「b2.gif」に変更するように設定してあるとします。 「a1.gif」をクリックして「a2.gif」になっている状態で「b1.gif」をクリックすると「a2.gif」が「a1.gif」に戻るようにするにはどのようにすればよいでしょうか。 このb1が、c1,d1,e1・・・・とたくさんある感じです。 質問の内容がわかりづりかもしれませんが、どなたかご教示いただけると幸甚です。 宜しくお願い申し上げます。

  • 分からないプログラムの流れ

    外部ファイル function changeCSS(sURL) { var obj = document.getElementsByTagName("link"); for (var i=0, cnt=0; i<obj.length; i++) { if (obj[i].type == "text/css") obj[i].href = sURL[cnt++]; } } 本体 <a href="#" onClick="changeCSS(['main.css','sb.css'])">1</a> <a href="#" onClick="changeCSS(['main.css','sb2.css'])">2</a> <a href="#" onClick="changeCSS(['main2.css','sb.css'])">3</a> cntがいらない様に思えるのですが消すと動作しなくなってしまいます どのように使われているのかプログラムの流れを教えてください

  • 別フレームのタグ属性を取得する方法

    いつもお世話になります。 左右に分割した左フレームから、右フレームのタグ属性を取得することはできないでしょうか。 過去ログ http://oshiete1.goo.ne.jp/kotaeru.php3?q=371451 を見て、 flm.htmlで、 <frame name="left" src="tst_fll.html" scrolling="auto" target="top"> <frame name="main" src="tst_flr.html" scrolling="auto" target="_self"> 左側フレームtst_fll.htmlで、 <script type='text/javascript'><!-- document.write("右側フレームの<br>タグ属性を取得<br>") alert("1 aaaaaこれは表示される"); var obj = window.main.document.getElementsByTagName("*"); alert("2 bbbbbこれは表示されない"); var len = obj.length; for (var i=0;i<len;i++){ var tagName = obj[i].tagName var hrefName = obj[i].id; var ttl = obj[i].title; document.write(ttl); } //--> </script> としてみたのですが、 alert("1 aaaaaこれは表示される"); までは、スクリプトが実行されるのですが、 alert("2 bbbbbこれは表示されない"); は、表示されず、この前でスクリプトが停止されてしまいます。 また、右側フレームtst_flr.htmlの内容は、以下のようなものです。 <h4 id="00" title="0章<br>">第0章</h4> <h4 id="01_fold" title="1章">第1章</h4> <h5 id="01_01" title="1-1">1-1</h5> <h5 id="01_02_fold" title="1-2">1-2</h5> <h6 id="01_02_01" title="1-2-1">1-2-1</h6> <h6 id="01_02_02" title="1-2-2">1-2-2</h6> <h5 id="01_03" title="1-3<br>">1-3</h5> よろしくお願いいたします。

  • javascriptのcanvasについて

    先日こちらで質問させて頂き、頂いた回答をもとに javascriptのcanvasについて勉強を続けていて、 canvasを2つ重ねたカラーシミュレーションのようなものを作りたいと考えています。 先日教えて頂いた内容をもとに 下記のような記述で2枚目のcanvasの画像を入れ替えることや、 色を変更することは出来ました。 ただ、「進む」ボタンや「戻る」ボタンを押したときに 色がもとの色に戻ってしまうので、色は固定されたまま(この記述でいうと茶色や赤)で 画像を入れ替える方法がわからずにいます。 なにか良い方法はないでしょうか。 <style type="text/css"> .canvas001 { position: absolute; top:100px; left:0px; } .canvas002{ position: absolute; top:100px; left:0px; } </style> <script> onload = function() { image1(); image2(); image3();}; function image1() { var cnvs = document.getElementById('canvas1'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "face.png"; }; function image2() { var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = "hair1.png"; }; var src = [  'hair1.png',  'hair2.png',  'hair3.png' ]; var currentIndex = 0; var currentImage; function hair(){ var img = currentImage = new Image(); img.onload = function() { if(currentImage === img){ var cnvs = document.getElementById('canvas2'); var ctx = cnvs.getContext('2d'); ctx.clearRect(0, 0, cnvs.offsetWidth, cnvs.offsetHeight); ctx.drawImage(img, 0, 0); } }; img.src = src[currentIndex]; } window.back = function(){ currentIndex = (currentIndex - 1 + src.length) % src.length; hair(); } window.foward = function(){ currentIndex = (currentIndex + 1) % src.length; hair(); } function black(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 35; idata[ i*4 + 1 ] = 24; idata[ i*4 + 2 ] = 21; } ctx.putImageData(imagedata,0,0); } function brown(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 140; idata[ i*4 + 1 ] = 96; idata[ i*4 + 2 ] = 37; } ctx.putImageData(imagedata,0,0); } function red(){ var ctx = document.getElementById("canvas2").getContext("2d"); var imagedata = ctx.getImageData(0,0,300,300); var idata = imagedata.data; var num = idata.length; var pix = num / 4; for ( var i = 0 ; i < pix ; i++ ){ var r = idata[ i*4 ]; var g = idata[ i*4 + 1 ]; var b = idata[ i*4 + 2 ]; idata[ i*4 ] = 182 ; idata[ i*4 + 1 ] = 0; idata[ i*4 + 2 ] = 5; } ctx.putImageData(imagedata,0,0); } </script> <body> <div> <div class="canvas001"><canvas id="canvas1" height="300"></canvas></div> <div class="canvas002"><canvas id="canvas2" height="300"></canvas></div> </div> <div> <form><div> <INPUT TYPE=button NAME="submit" VALUE="戻る" onClick="back()"> <INPUT TYPE=button NAME="submit" VALUE="進む" onClick="foward()"> </div></form> </div> <img src="btn_black.png" onclick="black()" > <img src="btn_brown.png" onclick="brown()" > <img src="btn_red.png" onclick="red()" > </body>

  • オブジェクト指向のsetTimeoutの呼び出し方法

    オブジェクト指向を勉強中です しかし今一しっくりきません。 setTimeoutの呼び出し部分の記述は、これでいいのでしょうか? やりたいことは、沢山の画像を一度に違ったタイミングでフェードアウト・インをすることです。 <html> <body> <img src="./img/1.gif" width="50" height="50" id="a"> <img src="./img/2.gif" width="50" height="50" id="b"> <input type="button" value="pp" onClick="img2.fin(10,50)"> <script> var img1 = new ImageEffect( 'a',100 ); img1.fout(10,30); var img2 = new ImageEffect( 'b',100 ); img2.fout(5,30); function ImageEffect( id,val1 ){ var func=[]; this.obj = document.getElementById( id ); this.opacity=(val1==undefined)? 100:val1; this.opacitySet = function(n){ this.obj.style.filter='alpha(opacity='+n+')'; this.obj.style.MozOpacity=n/100; this.obj.style.opacity=n/100; this.opacity = n; } this.fout = function(step,wtime){ func[id] = this; this.opacity-=step; if(this.opacity<1) this.opacity = 0; this.opacitySet(this.opacity); if( this.opacity ) setTimeout( function(){ func[id].fout( step, wtime);}, wtime);//ここの呼び出し } this.fin = function(step,wtime){ func[id] = this; this.opacity+=step; if(this.opacity>100) this.opacity = 100; this.opacitySet(this.opacity); if( this.opacity ) setTimeout( function(){ func[id].fin( step, wtime);}, wtime);//ここの呼び出し } }

  • オブジェクトがありませんのエラー

    過去ログを呼んで近いのがあったのでよく読んだのですが よくわかりませんので書き込みします。 以下のスクリプトで「オブジェクトがありませんのエラーが発生します。3行目のfor文の「obj.childNodes」でエラーが発生します。 「document.getElementById」が「null」であるのが原因のようですが、なぜ「document.getElementById」に値が入らないのかがつかめません。 お手数ですがよろしくお願いします 【script】 --------------------------------------------- if(document.getElementById && document.all && !navigator.userAgent.match(/Opera/)){ var obj = document.getElementById("mainmenu"); for(var i=0;i<obj.childNodes.length;i++){ if(obj.childNodes[i].className=="pullmenu"){ obj.childNodes[i].onmouseover = function(){pull(this) }; obj.childNodes[i].onmouseout = function(){pull(this) }; } } } --------------------------------------------- 【html】 --------------------------------------------- <ul id="mainmenu"> <li id="Begginer" class="pullmenu"><a href="http://www.○○○.co.jp/b/w.php">○○○</a> <ul> <li><a href="http://www.○○○.co.jp/b/w.php">○○○ </a></li> <li><a href="http://www.○○○.co.jp/b/s.php">○○○ </a></li> <li><a href="http://www.○○○.co.jp/b/m.php">○○○ </a></li> </ul> </li> </ul>

専門家に質問してみよう