Attach a plain JavaScript plugin to multiple html elements

Question

Let's say I want to make a plain JavaScript plugin.

  var myPlainJsPlugin = (function (param1,param2) {
   /*code here*/
 });

How do I attach this plugin, just after the document is loaded, to all elements with the class 'elmClass', without jQuery?

I am talking basically about making a plain JavaScript plugin and using it similar to using a jQuery plugin:

$('.elmClass').jQueryPlugin();

I am trying to give up jQuery for a certain project.

what do you mean attach it? click, hover loaded? which event and what should it do? should it just extend the HTMLElement? — Saar, Oct 19 '15 at 14:42
You could take selector as a parameter, then use document.querySelectorAll to get the elements and do whatever you want... however its hard to answer without more clarification — drys, Oct 19 '15 at 14:48
Do you want to RUN the myPlainJsPlugin() function when the user clicks on an element with the elmClass function? Still not quite clear on exactly what you mean by "attach" it. — KDot, Oct 19 '15 at 14:52

score 0 · Accepted Answer · edited May 23 '17 at 12:15

0

 window.onload = function(){
     var els = document.getElementsByClassName("elmClass");

     Array.prototype.forEach.call(els, function(el) {
           // Add code here 
           // e.g: el.onclick = doSomething();
     });
 };    `

`

Source: Link

edited May 23 '17 at 12:15

Community

1
1

answered Oct 19 '15 at 14:51

kameron tanseli

109
6

score 0 · Answer 2 · answered Oct 19 '15 at 14:54

0

Try this:

    var elemtsWithClass = document.querySelectorAll(".elmClass");
    for(var x=0; x<elemtsWithClass.length; x++){
            elemtsWithClass[x].addEventListener("click", function(e) {}); 
    });

answered Oct 19 '15 at 14:54

develask

3
3

Attach a plain JavaScript plugin to multiple html elements

2 Answers2