61720


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

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

[code]

    <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>
    
[/code]

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

[code]

    //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]]);
      }
    });
    
[/code]

[![error:Uncaught TypeError: Cannot read property '0' of
undefined](https://i.stack.imgur.com/xLxNN.png)](https://i.stack.imgur.com/xLxNN.png)

[![追加のHTMLです](https://i.stack.imgur.com/QTuY9.png)](https://i.stack.imgur.com/QTuY9.png)


CC BY-SA 4.0
2019-12-23T18:50:35.527
61719
2019-12-23T22:03:35.550
2019-12-23T22:03:35.550
32986
37178
question
javascript jquery
Uncaught TypeError: Cannot read property '0' of undefined, clientX を配列でセットできない。


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

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

* * *

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

  1. 最初に`evt`のプロパティ`'mx'`を取り出す  
(`evt`の中身はマウスイベントで、そんなプロパティは無いので結果は`undefined`)

  2. 取り出した値(`undefind`)の`i`(最初は`0`)番目を取り出そうとする

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

[code]

    Uncaught TypeError: Cannot read property '0' of undefined
    
[/code]

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

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

× `evt.mx[i]`  
↓  
○ `evt[mx[i]]`

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

* * *

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

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

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

[code]

    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);
[/code]

[code]

    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>
[/code]


CC BY-SA 4.0
2019-12-23T20:11:50.263
61720
2019-12-23T20:11:50.263
13972
61719
answer