

現在、素のJavaScriptでイベントリスナーを登録しようとしているのですが、"addEventLestener"自体が関数として認識されていないようです。

元となるオブジェクトはHTML要素で、`var isbn = document.getElementsByName("isbn");` と記述しました。

`Object.values(isbn);` で要素を取得できているのか確認したところ、要素の取得はうまくいっているようです。

コードは以下になります。

[code]

    window.addEventListener('DOMContentLoaded', function() {
    
        var isbn = document.getElementsByName('isbn');
        console.log(Object.values(isbn));
        getBookData(isbn);
    
    }, false);
    
    function getBookData(element){
    
        element.addEventListener('change', function(){
            // 処理
        }, false);
    
    }
    
[/code]

そして、取得しているHTML要素は以下になります。

[code]

    <input type="number" class="form-control" name="isbn" maxlength="13" value="" placeholder="" required>
    
[/code]


CC BY-SA 4.0
2019-05-25T15:13:14.413
55245
2019-05-25T16:34:34.680
2019-05-25T16:01:07.240
32986
34459
question
javascript
javascript で イベント定義する際に"Type Error: element.addEventLestener is not a function"となってしまい、イベント定義ができません。


`get​Elements​ByName` メソッドの返り値は **`NodeList` オブジェクト**です。

> ### § 3.1.3 DOM tree
> accessors[[1]](https://html.spec.whatwg.org/multipage/dom.html#dom-tree-
> accessors)
>
> The getElementsByName(name) method takes a string name, and must return a
> live NodeList containing all the HTML elements in that document that have a
> name attribute whose value is equal to the name argument (in a case-
> sensitive manner), in tree order.

`Node` インターフェイスは `EventTarget`
インターフェイスを継承しています[[2]](https://dom.spec.whatwg.org/#node)が、`NodeList` インターフェイスは
`EventTarget` インターフェイスを継承していません[[3]](https://dom.spec.whatwg.org/#nodelist)。

そのため、質問文のコードを動作させるためには、 **`NodeList` オブジェクト内の各 `Node` に対して、 `addEventListener`
メソッドを適用する**処理を行わなければなりません。

[code]

    window.addEventListener(
      "DOMContentLoaded",
      function() {
        var isbn = document.getElementsByName("isbn");
        getBookData(isbn);
      },
      false
    );
    
    function getBookData(element) {
      element.forEach(e => {
        e.addEventListener(
          "change",
          function() {
            console.log(e.value);
          },
          false
        );
      });
    }
[/code]

[code]

    <input type="number" class="form-control" name="isbn" maxlength="13" value="" placeholder="" required>
[/code]

* * *

参考:

  1. [HTML Standard - § 3.1.3 DOM tree accessors](https://html.spec.whatwg.org/multipage/dom.html#dom-tree-accessors)
  2. [DOM Standard - § 4.4. Interface Node](https://dom.spec.whatwg.org/#node)
  3. [DOM Standard - § 4.2.10.1. Interface NodeList](https://dom.spec.whatwg.org/#nodelist)


CC BY-SA 4.0
2019-05-25T16:05:23.270
55246
2019-05-25T16:34:34.680
2019-05-25T16:34:34.680
32986
32986
55245
answer