NodeListカスタムメソッドをプロトタイプで追加できません

-1

子ノードを反復処理するためのヘルパ関数を作成します。NodeListカスタムメソッドをプロトタイプで追加できません

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <ul class="list"> 
     <li>1</li> 
     <li>2</li> 
     <li>3</li> 
    </ul> 

    <script> 
     NodeList.prototype.addEvent = func => { 
      for (let i = 0; i < this.length; i++) { 
       this[i].addEventListener('click', func) 
      } 
     } 

     let myList = document.getElementsByClassName('list')[0] 

     function test() { 
      console.log('Hello') 
     } 

     myList.addEvent(test) 
    </script> 
</body> 
</html>

"myList.addEventは関数ではありません"と思っています。

私は、ソースMDN（ページの真ん中）でこれをachiveする方法の例を見ていた：https://developer.mozilla.org/en-US/docs/Web/API/NodeList

var elements = document.querySelectorAll(".suggestions"); 

NodeList.prototype.addEventListener = function(event, func) { 
    this.forEach(function(content, item) { 
     content.addEventListener(event, func); 
    }); 
} 

function log() { 
    console.log(this, " was clicked"); 
} 

elements.addEventListener("click", log);

UPDATE：.querySelectorAllを（使用

）を追加するために働きますNodeListのプロトタイプではなく、.getElementsByClassName（...）[0]、.getElementsByTagName（...）[0]または.getElementById（...） - これはどのように静的ノードリスト？

出典

2017-09-29 DarkCodeWiz

'addEvent'！==' AddEvent' – Utkanos

@Utkanosあなたは明確にしてくださいもらえますか？ – DarkCodeWiz

@DarkCodeWiz JavaScriptは大文字と小文字を区別します。 – Xufox

AddEvent()を作成していますが、addEvent()を作成している場合は、その違いに注意してください。

出典

2017-09-29 13:50:07 Utkanos

コードに複数の問題があります。

NodeList.prototype.AddEvent = function(func) { 
 
    for (let i = 0; i < this.length; i++) { 
 
    this[i].addEventListener('click', func); //notice this[i] instead of this 
 
    } 
 
} 
 

 
var myList = document.querySelectorAll('.list'); //notice that element name is not .list so use querySelectorAll 
 
myList.AddEvent(test); //addEvent to AddEvent 
 

 
function test() 
 
{ 
 
    console.log('Hello') 
 
}

<div class="list"> 
 
    List div 
 
</div>

出典

2017-09-29 13:52:49 gurvinder372

コード内の誤植は、仮説的であるため、申し訳ありません。私は貼り付けている例を実行しようとするので、私の答えを更新します。 – DarkCodeWiz

今、どうして私はまだこのエラーが出ているのですか？ – DarkCodeWiz

@ gurdvinder372 .querySelectorAll（）は動作しません.getElementsByClassName（...）[0]、getElementsByTagName（...）[0]またはgetElementById（...） - これはどのように静的ノードリストでのみ動作しますか？ – DarkCodeWiz

NodeListカスタムメソッドをプロトタイプで追加できません

答えて

関連する問題