title: how to call a function on load of an element?
body: <p>I am trying to call a function onload of elements so that I can specify different changes of each elements I am calling the function. </p>
  
  <p>like i have many divs and each and every div has same data-attribure, I am calling all divs with same data-attribute. Each and every div has different html text, I want to call them, when I am loading the page and get those different values. Like in jQuery we call 'each' function. Here I am submitting my html and javascript code... that will draw a clear picture of it. </p>
  
  <pre><code>   &lt;-- html --&gt;
     &lt;div data-attribute="one"&gt;
          &lt;span class='value'&gt;1000&lt;/span&gt;
     &lt;/div&gt;
     &lt;div data-attribute="two"&gt;
          &lt;span class='value'&gt;420&lt;/span&gt;
     &lt;/div&gt;
     &lt;div data-attribute="three"&gt;
          &lt;span class='value'&gt;2000&lt;/span&gt;
     &lt;/div&gt;
  
     &lt;!---- javascript ----&gt;
      var abc = document.querySelectorAll('[data-attribute]'); 
          for (i= 0; i &lt; abc.length; i++) {
              abc[i].onload = function(){  
              // --------- working well with click / mousemove events -----
                 console.log('function called!');
              };
          }
  </code></pre>
  
  <p>I don't want to use any library or don't want to call the function on element.</p>
  
  <p>P.S. also let me know if there is other option to do the same.
  Thank you.. </p>