0

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

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

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

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

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

}

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

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

 

0

1 件の回答 1

4

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

§ 3.1.3 DOM tree accessors[1]

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]が、NodeList インターフェイスは EventTarget インターフェイスを継承していません[3]

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

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
    );
  });
}
<input type="number" class="form-control" name="isbn" maxlength="13" value="" placeholder="" required>


参考:

  1. HTML Standard - § 3.1.3 DOM tree accessors
  2. DOM Standard - § 4.4. Interface Node
  3. DOM Standard - § 4.2.10.1. Interface NodeList

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

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