how to call a function on load of an element?

Question

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.

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.

   <-- html -->
   <div data-attribute="one">
        <span class='value'>1000</span>
   </div>
   <div data-attribute="two">
        <span class='value'>420</span>
   </div>
   <div data-attribute="three">
        <span class='value'>2000</span>
   </div>

   <!---- javascript ---->
    var abc = document.querySelectorAll('[data-attribute]'); 
        for (i= 0; i < abc.length; i++) {
            abc[i].onload = function(){  
            // --------- working well with click / mousemove events -----
               console.log('function called!');
            };
        }

I don't want to use any library or don't want to call the function on element.

P.S. also let me know if there is other option to do the same. Thank you..

Your elements are static so they must load before you can execute your javascript otherwise javascript will not be able to find the element to check the load state... For this I think you will need to create the elements once the page has loaded, then you should be able to use onload or a load event listener depending on what sort of elements you're loading. I'm finding it hard to understand your question so this is the best I can offer at this moment in time. — NewToJS
– NewToJS, Commented Sep 17, 2015 at 8:56
As @NewToJS hints, you have a "chicken and egg" problem. You cant assign an event handler until an element has loaded. What are you actually trying to achieve inside this onload handler? It may be that you can perform an action when the whole page has loaded, and vary the behaviour depending on some other attribute of the elements. — Jamiec
– Jamiec, Commented Sep 17, 2015 at 9:14
@Jamiec Yes , I want to perform an action when the whole page has loaded, and vary the behaviour depending on some other attribute of the elements. — Subhajit Das
– Subhajit Das, Commented Sep 17, 2015 at 10:12

Jamiec · Accepted Answer · 2015-09-17 10:41:37Z

2

You could wait for the entire DOM to load, and perform any actions you require.

window.onload = function(){
    var abc = document.querySelectorAll('[data-attribute]');
    for (i= 0; i < abc.length; i++) {
         var elem = abc[0];
         if(elem.getAttribute("data-attribute") == "one"){
             // do something here
         }
    }
}

You can expand this idea for as many different attributes/elements as you need.

answered Sep 17, 2015 at 10:41

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3071284 · Accepted Answer · 2015-09-25 18:33:48Z

1

Ready and Load are executed upon document object model. So, you cannot call them on a specific element. In this case, you can use set-timeout function after the DOM is ready to change on multiple elements.

edited Sep 25, 2015 at 18:33

user3071284

7,1306 gold badges46 silver badges60 bronze badges

answered Sep 25, 2015 at 17:37

Hiranmoy Ghatak

111 bronze badge

1 Comment

Felix H. Over a year ago

Actually, this answer is right. I've tried all of 'DOMContentLoaded', 'load' and 'ready', and doesn't work. I found this answer, and tried with setTimeout() function and it works well.

Collectives™ on Stack Overflow

how to call a function on load of an element?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related