AddEventListener à un élément d'article en Javascript

J'essaie d'ajouterEventListener à tous les éléments de l'article, alors lorsqu'ils sont cliqués, ils les transforment en un élément compressible.

Je n'utilise pas jQuery pour cette tâche.

Tentative 1:

document.getElementsByTagName("ARTICLE").addEventListener('click', function(){ document.getElementsByTagName("ARTICLE").setAttribute('draggable', true);});

Tentative 2:

 function draggableTrue() { var addDrag = document.getElementsByTagName("article"); addDrag.setAttribute('draggable', true); } //add event listener to articles var draggableArticles = document.getElementsByTagName("article"); draggableArticles.addEventListener('onclick', draggableTrue);

Dans les deux, je reçois un "Uncaught TypeError: undefined n'est pas une fonction", qui souligne généralement que je manque quelque chose, mais après avoir lu je ne peux pas comprendre quoi.

Document.getElementsByTagName renvoie une collection. Donc, vous devez l'itérer pour ajouter les auditeurs de l'événement. Cette collection est des collections de nœuds DOM natifs et non une collection jquery, donc vous ne pouvez pas utiliser addEventListener sur la collection.

 var articles = document.getElementsByTagName("ARTICLE"); var eventListener = function(){console.log('clicked an articles')} for(var i=0; i<articles.length; i++){ articles[i].addEventListener('click', eventListener ); }

Eh bien, vous devez vérifier vos derniers cas.

Mais il y a un autre problème, tout code lié aux éléments DOM doit être exécuté lorsque cet élément est chargé (ou identifié par Javascript Engine). L'événement suivant (onload) s'assure que lorsque la fenêtre est chargée, puis elle exécute la fermeture assignée. window.onload = function(){} est ce dont vous avez probablement besoin.

 window.onload = function(){ // call your functions or document event listeners here }

Également TagName, TagNameNS et ClassName renvoie tous une collection sur laquelle vous avez enregistré:

 var allDivs = document.getElementsByTagName("div"); for(var i = 0; i < allDivs.length; i++) { allDivs[i].addEventListener(); }