

初めて質問させて頂きます。  
ChromeなりFirefoxのデベロッパーツールを使って、任意の場所にマウスカーソルの現在座標を表示させようとしています。サイトを表示させてデベロッパーツールを開き、htmlの適当な位置に以下のようなエレメントを追加しました。

[code]

    <div>
    X:<input id="mouseX"></input>
    Y:<input id="mouseY"></input>
    </div>
    
[/code]

上記は無事表示されています。ここで更にbodyタグ直下にscriptタグで以下のようなコードを挿入しました。

[code]

    <script>
    onload=function() {
        fieldX=document.getElementById("mouseX");
        fieldY=document.getElementById("mouseY");
        document.onmousemove=function(evt){
            if(document.all && !window.opera){
                fieldX.value=window.event.clientX;
                fieldY.value=window.event.clinetY;
            }else{
                fieldX.value=evt.pageX;
                fieldY.value=evt.pageY;
            }
        };
    }
    </script>
    
[/code]

なんとなくダメそうな気はしてましたがやはりだダメだったので、onload=function(){}を削除してみましたがダメでした。もっと時間を掛けてじっくり調べるか、一からJavaScriptの基本的な所をもっと深く理解すれば、基本的な所が解って無さそうな気はしてるのですが、自分の今の理解では少し時間が掛かりそうなので、こちらでもっと詳しい方のお知恵を拝借できればと思い質問させて頂きました。

どなたかお知恵をお貸し頂けたら嬉しいです。宜しくお願いします。


CC BY-SA 3.0
2015-11-03T13:14:15.503
18368
2015-11-03T23:36:41.217
13091
question
javascript
デベロッパーツールにマウスカーソルの位置取得Javasscriptの埋め込み方


> onload=function();

上記のコードが複数記入されていませんか？  
onload(window.onload)を複数記入すると、後から記入したコードで上書きされてしまい最初のonloadは実行されないということが起こってしまいます。

なので、onloadが複数ある場合は一つにまとめて実行してみてください。  
もしくは、

[code]

    <script>
        onload = function() {
            foo(); //別名で呼び出し
        }
    
        var foo = function() {
            fieldX=document.getElementById("mouseX");
            fieldY=document.getElementById("mouseY");
            document.onmousemove=function(evt){
                if(document.all && !window.opera){
                    fieldX.value=window.event.clientX;
                    fieldY.value=window.event.clinetY;
                }else{
                    fieldX.value=evt.pageX;
                    fieldY.value=evt.pageY;
                }
            };
        }
    </script>
    
[/code]

というように、onloadではなく別名をつけて呼び出してください。

ちなみに、onloadは名前の通り、 **HTMLファイルを読み込んだ後に実行する** といった意味合いがあります。  
なので、onloadを外して失敗した理由は「HTMLファイルをまだ読み終わっていない状態で、idがmouseXや、mouseYの要素を探してしまっているので、見つからなかった」ということになります。

onloadを外して実行する場合は、`<body></body>`タグの後においてテストしてみてください。

関数の中身自体は私の環境では問題なく動作しました。


CC BY-SA 3.0
2015-11-03T21:49:02.743
18380
2015-11-03T21:49:02.743
13097
18368
answer


開発ツールで挿入した script タグのコードは実行されるものなのでしょうか。  
ブラウザにもよるのかもしれませんが、手元の Firefox では実行されていないようです。  
JavaScript を実行させたい場合は「コンソール」などと呼ばれる対話環境があると思うので、そこに打ち込むのがよいです。

さて、コンソールで質問のコードを実行すれば onload に関数を代入する事は出来ると思います。  
しかし、Ke Naさんの回答でも指摘されているように、onload が実行されるのは特定のタイミングです。  
コンソールに打ち込むのが間に合わないでしょうから、このタイミングは逃している事と思います。

[code]

    onload();
    
[/code]

などとして手動で実行させる必要があります。（開発ツールのコンソールで実行する場合は、onload に代入する意味もあまり無いかもしれません）


CC BY-SA 3.0
2015-11-03T23:36:41.217
18383
2015-11-03T23:36:41.217
3054
18368
answer