• 締切済み

.getElementByIdでnameを拾う?

javascriptで.getElementByIdでなぜかname属性を拾ってしまいます。 <script> function gets() { aa = document.getElementById('idid').innerHTML; bb=document.getElementById('idid').tagName; alert(aa+bb); } </script> <input type="submit" value="ボタン" name="idid" onclick="gets();"><span id="idid">ああああ</span> 上記は大分省略してえいますが、このようなコードで aaに「ああああ」が代入されず、bbに「INPUT」が代入されます。 通常ならアラーとは「ああああSPAN」のはずが「INPUT」になってしまいます。 どのような理由が考えられるでしょうか。 ちなみに、HTMLページはフレーム内で表示しています。

みんなの回答

  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.2

ブラウザによる id/name の混同は悪習ではありますが、 互換性の為に今後も残る可能性がありますので、 ちょっとした契機でバグが発生する要因として、 これからも生き残っていくのでしょう。 残念ながら なので、この手の対策として * id と name で被らない様な名前付けをする を今後も心がけたほうが良いでしょう。 そもそも目的の異なる属性なので被らない筈です。 <input type=text name=hoge id=hoge> なんて実装は論外ですよ!

回答No.1

ググりゃ分かることですが、IE7以前のブラウザの誤動作です。 https://www.google.com/search?q=getElementById+name 今時IE7以前が入ってるのは「会社のだからアップデートできない古いPC」くらい。一般の人は大抵8以降ですから、気にする必要はありません。

関連するQ&A

  • セレクト部品の表示内容

    が選択されているかどうかによって変化するようにしたいのですが 以下のようにしてもうまくいきません。 何か解決策はないでしょうか? <script> function func() { document.getElementById("00").innerHTML="00.aa"; document.getElementById("01").innerHTML="01.bb"; } function func2() { document.getElementById("00").innerHTML="00"; document.getElementById("01").innerHTML="01"; } </script> <select onfocus="func()" onblur="func2()"> <option value="00"><span id="00">00</span></option> <option value="01"><span id="01">01</span></option> </select>

  • getElementByIdでonClick内を書き換える方法

    お尋ねします。 適当なIDを振ったaタグ内の各プロパティを画像の切り替えに応じて 書き換えるスクリプトを試しています。 srcや画像の切り替えなどはうまくいくのですが、 onclick内だけうまく書き換えができません。 onclickはイベントハンドラだから無理という気がするのですが、 なにか方法はないでしょうか。 以下のようなスクリプトを書いています。 myImageName = 0; myImageLink = 1; myImageTarget = 2; myclick = 3; myImage = new Array(); myImage[0]= new Array("01.jpg","ttp://aa.com/","_top","alert('HELLO')"); myImage[1]= new Array("02.gif","ttp://bb.com/","_blank","alert('HI')"); i = 0; function aaa(){ document.getElementById("banner").src = myImage[i][myImageName]; document.getElementById("banner").href =myImage[i][myImageLink]; document.getElementById("banner").target =myImage[i][myImageTarget]; document.getElementById("banner").onclick =myImage[i][myclick]; } ※あとはタイマー用のスクリプトが続きます。 記述が間違っている気はするのですが、 解決策がわかりません。 よろしくお願いいたします。

  • if構文

    初心者でif構文がよくわからず質問させてください。 下記のようなボタンをつくり、 <form action="#"> <input type="button" value="うさぎ" id="txt" onclick="aGetElementById()" /> <input type="button" value="とり" id="txt" onclick=b"GetElementById()" /> </form> ボタンをクリックして、 <div><span id="box"></span>が大好きです。</div> のspanの中にvalue名(うさぎ・とり)を表示させ、『「value名」が大好きです。』と表示させたいのです。 Javascriptを下記のように書いてみたのですが、テキスト表示の切り替えがうまくいきません。 <script> <!-- function aGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } function bGetElementById(){ var text=document.getElementById("txt"); var box=document.getElementById("box"); box.innerHTML=txt.value; } --> </script> どうかおしえてください。 よろしくお願いします。

  • JSのgetElementByIdについて

    以下のコードはtextに書き込まれた内容を取得して表示するコードなのですが 値が取得できません どうすればできますか? <!doctype html> <head> <meta charset="utf-8"> </head> <body> <input type="text" id="txt"> <input type="button" value="TEST" onclick="tamesi();"> <script> function tamesi(){ var aaa = document.getElementById('txt'); document.write(aaa); } </script> </body> </html>

  • フォームのvalueを変更する方法

    下記はjavaScriptで書いたものですが、javaScriptが有効になっていないと機能しないので perlで同じことをやりたいのですが、フォームのvalueを変更する方法とinnerHTMLの様なボタンをクリックするとテキストを変更する方法が分かりません。 ヒントでも良いので教えていただけませんか? <HTML> <HEAD><SCRIPT language="JavaScript"> <!-- function nextA(){ var data = document.formA.data.value; data++; document.formA.data.value = data; } //--> function nextB(){ var data = document.formB.data.value; data++; document.formB.data.value = data; document.getElementById("print").innerHTML = data; } //--> </SCRIPT> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </HEAD> <BODY> <FORM name="formA"> <input name="data" value="1"> <INPUT type="button" value="足す" onclick="nextA()"> </FORM> <FORM name="formB"> <SPAN id="print">1</SPAN> <INPUT type="button" value="足す" onclick="nextB()"> <INPUT type="hidden" name="data" value="1" > </FORM> </BODY> </HTML>

    • ベストアンサー
    • CGI
  • リンク押下でタグを書き換えたい

    リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>

  • JavaScript表示切替の問題

    ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>

  • javascriptで困っています

    スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>

  • 【javascript】document.getElementByIdは一つしか使えないの?

    以下をhtmlをブラウザで見ると、文字列"aaa"は表示されますが、"bbb"は表示されません。 <html> <head> <SCRIPT LANGUAGE='JavaScript1.2'><!-- function init(){ document.getElementById("a").innerHTML="aaa"; document.getElementById("b").innerHTML="bbb"; } //--></script> </head> <body onload="init()"> <div id="a"></dev> <div id="b"></dev> </body> </html> ブラウザはIE,FFと試しましたが共に同じ結果でした。 FFのエラーコンソールには document.getElementById("b").innerHTML="bbb" is null のエラーメッセージが出てましたが、文法的に何が問題なのでしょうか?

  • ループ、プログラムなのに!?

     以下のプログラムは、ただの乗算と、その合計を計算するだけなのに、なんでfor (var i = 1; i < 4; i++) {  のループ、プログラムなのですか?  もし同じ計算結果のダイアログBOXで、Javaの範疇で組むのであれば、他にどんなプログラムがあるのですか?  よろしくお願いします。 <HTML> <HEAD> <TITLE>ループ</TITLE> <script tytpe="text/javascript"> <!-- function calc(){ var alltotal = 0; for (var i = 1; i < 4; i++) { var price = document.getElementById("price" + i).innerHTML; var num = document.getElementById("num" + i).value; var total = price * num; document.getElementById("total" + i).innerHTML = total; alltotal += total; } document.getElementById("alltotal").innerHTML = alltotal; } </script> </HEAD> <body> <p><span id="price1">100</span><input id="num1" value="0" /><span id="total1">1の合計</span></p> <p><span id="price2">200</span><input id="num2" value="0" /><span id="total2">2の合計</span></p> <p><span id="price3">300</span><input id="num3" value="0" /><span id="total3">3の合計</span></p> <div id="alltotal">合計</div> <button onclick="calc()">計算</button> </body> </HTML>

専門家に質問してみよう