0

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

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

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

<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>

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

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

2 件の回答 2

1

onload=function();

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

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

<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>

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

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

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

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

1
  • 特定のサイト(例えば現在見ているこの質問ページ等)でデベロッパーツールを使って、座標を表示させたいということでしょうか? 仮にそうだとしたら、mjyさんの解答が正しいかと思います。 デベロッパーツールを使ってHTMLを編集して要素(mouseX,mouseY)を追加した後、コンソールにonloadに指定しているfunctionの中身を挿入すると座標を表示することができます。 挿入した後に表示されているサイトのページでマウスを操作すると、座標が表示されると思います。 ただ、デベロッパーツール自体はブラウザがそれぞれ独自に提供しているものになるので、どの環境でも実行できるかは分からないです。
    – KeNa
    Commented 2015年11月4日 14:54
1

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

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

onload();

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。