0

addEventListner()でMousemoveの座標をモニターしたいのですが、evt.mx[i]でエラーがでます。 なぜ。イベントのプロパティに配列からセットできないのでしょうか?配列を使わないで、すべてを列記すれば可能なのですが、コードを短く書きたいのので。

それから、ちなみにjQueryではtext()を使うことで可能です。なぜjavaScriptではエラーになるのか理解できません。どなたか説明をしていただけないでしょうか?

<script>
  var mx = ['clientX', 'clientY', 'pageX', 'pageY', 'screenX', 'screenY'];

  document.addEventListener('DOMContentLoaded', function() {
    for (var i = 0; i < mx.length; i++) {
      console.log(mx[i]);
      mx[i] = document.getElementById(mx[i]);
      mx[i].innerHTML = "Hi there!";
    }
    window.addEventListener('mousemove', function(evt) {
      for (var i = 0; i < mx.length; i++) {
        mx[i].innerHTML = evt. ** mx[i] ** ;
      }
    }, false);
  }, false);
</script>

jQuery: この方法では可能なのですが。

//Mouse Move Events jQuery
$(document).on('mousemove', function(e) {

  let m = ['screenX', 'screenY', 'pageX', 'pageY', 'clientX', 'clientY', 'offsetX', 'offsetY'];
  for (var i = 0; i < m.length; i++) {
    $('#' + m[i]).text(e[m[i]]);
  }
});

error:Uncaught TypeError: Cannot read property '0' of undefined

追加のHTMLです

1
  • コードを読む限りではイベントオブジェクトのプロパティを参照していないことがエラーの原因ですが、念のため HTML を質問文へ追記していただけませんか?
    – supa
    Commented 2019年12月23日 19:40

1 件の回答 1

0

あなたの「JavaScriptの」コードには2点大きな誤りがあります。

  • evt.mx[i]という書き方
  • 配列mxの中身を、文字列からDOM要素に書き換えてしまっている

まず1点目、evt.mx[i]と言うのは、

  1. 最初にevtのプロパティ'mx'を取り出す
    (evtの中身はマウスイベントで、そんなプロパティは無いので結果はundefined)
  2. 取り出した値(undefind)のi(最初は0)番目を取り出そうとする

と言う動作になります。JavaScriptのundefinedには0番目の要素なんてありませんから、

Uncaught TypeError: Cannot read property '0' of undefined

なんてエラーになります。

JavaScriptでドット構文でプロパティにアクセスすると、常にドットの直後の識別子をそのままプロパティ名として使用します。配列の中身や式などを使って動的にプロパティにアクセスしたいのであれば、配列と同様に[]を使います。

× evt.mx[i]

evt[mx[i]]

(jQueryを使っているコードでは、正しくe[mx[i]]と書いているのに…。)


ただし、あなたのコードはそこだけ修正しても期待通り動くようにはなりません。なぜなら最初のforループの中でmxの要素が文字列からDOM要素に書き換えられてしまっているからです。

mx[i]がDOM要素になっている状態でevt[mx[i]]なんてやっても、JavaScriptのルール上実行時エラーにはなりませんが、結果はundefinedになってしまいます。

前半でmxの中身を書き換える必要はないので、例えば次のようにしてやると良いでしょう。

var mx = ['clientX', 'clientY', 'pageX', 'pageY', 'screenX', 'screenY'];
  
    document.addEventListener('DOMContentLoaded', function() {
      for (var i = 0; i < mx.length; i++) {
        console.log(mx[i]);
        var domElement = document.getElementById(mx[i]);
        domElement.innerHTML = "Hi there!";
      }
      window.addEventListener('mousemove', function(evt) {
        for (var i = 0; i < mx.length; i++) {
          var domElement = document.getElementById(mx[i]);
          domElement.innerHTML = evt[mx[i]];
        }
      }, false);
    }, false);
clientX=<span id='clientX'></span><br>
clientY=<span id='clientY'></span><br>
pageX=<span id='pageX'></span><br>
pageY=<span id='pageY'></span><br>
screenX=<span id='screenX'></span><br>
screenY=<span id='screenY'></span><br>

3
  • ご指摘の通り、evt[mx[i]]で動的にプロパティを設定することができました。確かに、jQueryではそのようにしていました。 それから、他のご指摘の点、"なぜなら最初のforループの中でmxの要素が文字列からDOM要素に書き換えられてしまっているからです" についてですが、DOM要素に変換すること自体は問題があるのでしょうか?こういう使い方をしても正しいのでしょうか? プログラミング歴が浅いため、教えてもらえますか? @taromor
    – taromor
    Commented 2019年12月23日 20:44
  • @taromor さん、evt[mx[i]]という記述がある時にmx[i]がDOM要素になっていると、「そのDOM要素の文字列表現を求める」→「その文字列を使ってevtのプロパティをアクセスしようとする」という動きになるので、あなたがご質問に掲載されたようなコードの場合は間違いなく「問題がある」と言うことになります。一般的なプログラミングの習慣としては、「文字列とDOM要素なんて全く異なるものを同じ変数に入れるのは良くないこと」と言うのが多くの方の認識だろうと思います。(プログラムが大規模化してきた時に、文字列が入っているのかDOM要素が入っているのか、判別が難しくバグの要因になりやすい。)
    – OOPer
    Commented 2019年12月23日 20:52
  • @OOPerさん記載のコード var =domElement でここにmx[i]なんて使わなくていいことを学びました。感激!
    – taromor
    Commented 2019年12月23日 21:48

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

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