Is it possible to call function when HTML element gets loaded?

Question

For example if I have in my body following

<button id="start"></button>

Is it possible to define in the HTML code a JS function that will be called when this element is loaded/shwon? So for example I can set some value of this element in JS? I know I can do in JS getElementBy... but that would be in the opposite direction I'm wanting to achieve this. If yes, is it then possible to access the id of this html element in the called function?

I think you are looking for a [mutationobserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) — Get Off My Lawn, Mar 11 '19 at 16:27
I guess at some point you create/show those elements. Why don't you act there directly? — Federico klez Culloca, Mar 11 '19 at 16:31
I have an answer, but can't answer the question :( Here is a fiddle: https://jsfiddle.net/tp4Loykb/ You will need to open the console. — Get Off My Lawn, Mar 11 '19 at 17:00
I posted [this answer](https://stackoverflow.com/a/55106785/9325419) on the duplicated question, maybe it can help you — jo_va, Mar 11 '19 at 17:01

score 2 · Answer 1 · answered Mar 11 '19 at 16:34

2

var startNode = document.getElementById('start');
var observer = new MutationObserver(() => {
   if(startNode.style.display !='none' ){
        //when DOM is visible
   }else {
        //when DOM is hidden
   }
});
observer.observe(startNode,  { attributes: true, childList: true });

You can just use MutationObserver to observe the changes for specific element.

answered Mar 11 '19 at 16:34

user3322481

305
2
4

the callback first parameter of the mutationobserver is a list of changed nodes. – Get Off My Lawn Mar 11 '19 at 16:40
This also wont detect when the element is added to the DOM. – Get Off My Lawn Mar 11 '19 at 16:42

Is it possible to call function when HTML element gets loaded?

1 Answers1