• 締切済み

HTMLタグのidにaaaという名をつけると、Javascriptのf

HTMLタグのidにaaaという名をつけると、Javascriptのfunctionで aaaという関数を作成してそれを呼んだときにnot foundとなるのは何故でしょうか？

みんなの回答

回答No.2

どんなブラウザでnot foundというエラーが出たのか、 またその現象が確認できるコードを補足して下さい。 id="aaa"をどのように扱うかは、現状ではブラウザ依存です。 最新ブラウザでは、FirefoxはJavaScriptに関与しない、それ以外のブラウザは変数名として扱えるようになっています。 （詳しい仕様についてはNo.1参照でお願いします） function aaa(){}とvar aaa=function(){}はほぼ同じ意味で、どちらも変数aaaとして扱えますので、 それがid="aaa"と競合することがあります。

  • think49
  • ベストアンサー率59% (285/482)
回答No.1

id="aaa" な要素が定義されると、window.aaa (グローバル変数aaa) に該当する要素ノードが格納されます。 --- 6.2.4 Named access on the Window object window[name] 　Returns the indicated element or collection of elements. The Window interface supports named properties. The names of the supported named properties at any moment consist of: ・the value of the name content attribute for all a, applet, area, embed, form, frame, frameset, iframe, img, and object elements in the active document that have a name content attribute, and ・the value of the id content attribute of any HTML element in the active document with an id content attribute. http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#named-access-on-the-window-object --- ただ、この動作を踏まえた上でも、再現できません。(Google Chrome 5, IE8 で検証) (※以下、全角空白を半角空白に置換してください。) --- <!DOCTYPE html> <html lang="ja"> <head> 　<meta charset="UTF-8" /> 　<title>HTML5</title> </head> <body> <p id="aaa">HTMLParagraphElement</p> <form name="tform"><p><input type="text" name="nickname" /></p></form> <p><iframe name="tiframe"></iframe></p> <p><img name="timg" src="./test.png" alt="test" /></p> <p><a name="ta" href="#ta">HTMLAnchorElement</a></p> <script><!-- alert(aaa.toString());　　 // [object HTMLParagraphElement] alert(tform.toString());　 // [object HTMLFormElement] alert(tiframe.toString()); // [object DOMWindow] alert(timg.toString());　　// [object HTMLImageElement] alert(ta.toString());　　　// Google Chrome 5 = Uncaught ReferenceError: ta is not defined / IE8 = http://example.com/index.html#ta //--></script> <script><!-- alert(aaa.toString()); // function aaa () { alert('aaa'); } aaa();　　　　　　　　 // aaa function aaa () { alert('aaa'); } //--></script> </body> </html> --- 関数定義前に aaa を呼び出せば、確かに aaa(); は実行されません。 しかし、上のscript要素内ではまだ関数定義される前ですのでa要素ノードが呼び出されるのは当然のことで、関数定義される下のscript要素内では確かに aaa(); が実行されます。 id="aaa" な要素があるかどうか、が原因ではないように思えます。 そもそも、上のケースでは「not found」にはなりませんので見当違いの回答かもしれません。 「not found」というエラーメッセージも見覚えがないので…。 「正確なエラーメッセージ」と「再現可能なコード」を貼り付けてもらえれば、適切な回答がもらえるかもしれません

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Javascriptで正規表現を使って HTMLタグの[id="hea

    Javascriptで正規表現を使って HTMLタグの[id="header-nav"]のような文字列がある場合に[id="headerNav"]というように一斉に置換するにはどういったふうに書けば良いでしょうか？

  • JavascriptでのHTMLタグの書き換え

    (1)HTML内のあるaタグをクリックします。 onClick="doAction(1,2,3) (2)その値を[hoge.php]に渡します。 function doAction(a,b,c){ $.post('hoge.php',{a:a,b:b,c:c},callback); } (3)hoge.phpで値を元に処理した結果[$result]と[$s]をHTMLに戻します。 echo $result; echo $s; (4)戻ってきた値を元にHTML内の特定のタグを書き換えたい function callback(result,s){ $('#message').html(result); } ここで質問です。上記の(4)の場合、 HTML内の[id=message]タグが書き換えられますが、 ここを可変にしたい場合はどのようにしたら宜しいのでしょうか？ 具体的には、 [id=message5] のように、messageの後ろに数字が入ります。 そしてその数字は$sの値です。 ■失敗した例 ・ｓをプラスで入れてみた function callback(result,s){ $('#message'+s).html(result); } ・ｓを連結してみた function callback(result,s){ $('#message'.s).html(result); } 宜しくお願いします。

  • HTML:Tableタグに対し、JavaScriptで動的にイベントを

    HTML:Tableタグに対し、JavaScriptで動的にイベントを追加しようとしています。 onclick / ondblclickイベントを目的のTableに対しattachEventすると、ダブルクリックの 際に、onclickイベントまで発動してしまいます。 ダブルクリックしたときは、ondblclickのみ実行されるようにするにはどうしたらよいでしょうか。 例） <script type="text/javascript"> function click01() {...} function dblclick01() {...} table01.attachEvent("onclick",click01) table01.attachEvent("ondblclick",dblclick01) </script> (略) <table id="table01"> ...

  • HTML id名とjavascript変数名

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>test</title> <script type="text/javascript"> window.onload = function() { console.log('test' in window); test.addEventListener('click', function() { alert('click') }, false); }; </script> </head> <body> <div id="test">test</div> </body> </html> 何かすごい勘違いをしていたらお恥ずかしいのですが、 上のコードFIREFOX以外（IE、Chrome、safari）'true'でtestをクリックするとalertが 出るのですが、これって自動的にid名がグローバル変数になってるって ことなのでしょうか？？ id名と同じ名前で変数を宣言していて、ぶち当たりました。 どうぞよろしくお願いいたします。

  • 共通したクラス名を持つ複数のタグのIDを取得したい

    共通したクラス名を持つ複数のタグのIDを取得したい <div class="classA" id="id1">aaa</div> <div class="classB" id="id2">bbb</div> <div class="classA" id="id3">ccc</div> となっているHTMLファイルからjqueryで要素を取得するプログラムを作成しています この時、class="classA"となっているID(id1とid3)とテキスト(aaaとccc)をjqueryで取得する方法を考えています jqueryで、 var elements = $(".classA"); でclass名がclassAの要素の数を取得したり、 var id = $(".classA").attr("id"); でidを指定すれば取得することもできました しかし、これはjqueryがあらかじ

  • HTMLページ内のタグに対してのイベント

    HTMLページ内のタグに対してのイベント getElementsByTagNameで指定したタグの部分（画像やリンク）をクリックすると関数を呼び出すという動作をやりたいのですが、どうも上手くいきません。 試しに下記のようなプログラムを作ってみたのですが、ページを表示した後すぐにalert関数が呼び出されてしまいます。 あるタグの部分を押したときに関数を呼び出すというやり方を知っている方がおられましたら、ご教授願います。 ひとつひとつにIDを割り当てるというやり方でなくて、タグ別にイベントを判定するやり方を考えています。 <html xmlns="http://www.w3.org/1999/xhtml" > <head> 　　<title></title> 　　<script type="text/javascript"> 　　　window.onload = function ini(){ 　　　　document.getElementsByTagName("img").onClick = alert("これは画像です"); 　　　} 　　</script> </head> <body> 　<img src="..." /> 　<img src="..." /> 　<img src="..." /> 　<img src="..." /> </body> </html>

  • HTMLとJAVASCRIPT

    HTMLは、比較的簡単に打ち込めて、 簡易的なHPを作成できると思っています。 ジャバスクリプトというのは、 どのように打ち込むとHPが作成できるのでしょう？ そして、どう違うのですか？ 最近、HPのソースを表示すると、 なんだか「JAVASCRIPT」の文字をよく目にするようになりました。 僕も、HTMLタグだけじゃなく、 javascriptも使用してみたいです。 誰か参考になるサイト等、教えてください。 お願いします。 それと、ジャバスクリプトを使用したら、 どのような長所ができるのでしょうか？ 楽しいHPが作れるのは、聞いたことがあります。 画像を回転させたりしていましたので・・・。 誰か、ジャバスクリプトで作成したHP知っている人いたら、 教えてください。 最終的な質問内容 ・ジャバスクリプトとは？ ・ジャバスクリプトはどうやって打ち込むのか ・ジャバスクリプトについて、初心者でもわかるサイトを教えてください

  • HTMLのフォーム名とJavaScriptの関数名

    JavaScriptを勉強し始めたばかりの者です。 submitボタンがonClickされたときにcheckという関数を呼び出しているのですが、 フォーム名とJavaScriptの関数名を同じものにすると、その関数が呼び出されなくなっているようなのです。 ------------------ form.html ----------------------------------------------------- <html> <head> <meta http-equiv="Content-type" content="text/html; charset=euc-jp"> <script type="text/javascript" src="test.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <title>フォーム</title> </head> <body class="blue" marginwidth="100" topmargin="40" bottommargin="80"> <form name="check" method="post" action="form2.cgi"> <table border="1" cellpadding="7"> <caption>フォーム</caption> <tr> <td>※ID</td> <td><input type="text" name="id"></td> <td>テキストボックス</td> </tr> </table> <br> <input type="submit" name="send" value="送信" onClick="check()"> <input type="reset" name="clear" value="リセット"></td> </form> </body> </html> ------------------ test.js ------------------------------------------------------- <!-- function check() { if( document.check.id.value == "" ){ alert( "※のついている項目は入力必須項目です！" ); } return; } --> ------------------------------------------------------------------------------- 上記のソースで、テキストボックスに何も入力せずに送信ボタンを押してもalertは表示されませんが、 フォーム名あるいは関数名のどちらかをcheck1やcheck_1にすると表示されるようになります。 フォーム名と関数名を同じものにするとalertは表示されません。 フォーム名と関数名の関係はこのようなものなのでしょうか？ また上記のソースに原因があるようでしたらお教えください。

  • javascriptにてHTMLのhiddenエリアのvalueを変更したい

    javascriptにてHTMLのHIDDENエリアのVALUEをフォームの値が変わるごとに更新していきたいのですが、やり方がいまいちわかりません。 <input type = "text" value="10" id="aaa" onchange=aaa();/> <input type = "text" value="20" id="bbb" onchange=aaa();/> <input type = "hidden" name="abc" value="aaa"/> <script> function aaa(){ document.abc.value = document.getElementById("aaa").value+document.getElementById("bbb").value ; } </script> このような感じで考えていますが、進みません。どなたかご教授お願いいたします。

  • HTMLとJavascriptの汎用的な書き方について

    HTMLのタグにid="namae"とすれば、Javascriptでdocument.getElementByIdを使って平面状に（すべてdocumentの下？）でアクセスできるので、 getElementByIdは便利かなと思っているのですが、 タグで name属性を使ってアクセスする場合と、 id属性でgetElementByIdでアクセスする場合の どちらが今後一般的になるのでしょうか？ nameは昔から？あったようなので、切り捨てるのも 気になりますが、記述の面で両方書くと手間なので、 id属性で一本化しても問題ないでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する