# addEventListener load for Dynamically Loaded Script

**URL:** https://forum.kirupa.com/t/addeventlistener-load-for-dynamically-loaded-script/644091
**Category:** programming
**Created:** [September 7, 2020, 11:21am UTC](https://forum.kirupa.com/t/addeventlistener-load-for-dynamically-loaded-script/644091 "2020-09-07T11:21:59Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Shraddha\_Ingale](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/shraddha_ingale/32/12399_2.png) [@Shraddha\_Ingale](https://forum.kirupa.com/u/Shraddha_Ingale)
#### Post date: [September 7, 2020, 11:21am UTC](https://forum.kirupa.com/t/addeventlistener-load-for-dynamically-loaded-script/644091/1 "2020-09-07T11:21:59Z")

</div>

I want to modify css of the container that loaded from dynamic script  
I tried to use  
myScript.addEventListener(“load”, scriptLoaded, false); but it is getting null values.

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [September 7, 2020, 1:59pm UTC](https://forum.kirupa.com/t/addeventlistener-load-for-dynamically-loaded-script/644091/2 "2020-09-07T13:59:36Z")

</div>

Can you provide a more complete (yet still as simple as possible) example of what you’re talking about?

---

<div class="post-metadata">

### Author: ![Shraddha\_Ingale](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/shraddha_ingale/32/12399_2.png) [@Shraddha\_Ingale](https://forum.kirupa.com/u/Shraddha_Ingale)
#### Post date: [September 7, 2020, 2:27pm UTC](https://forum.kirupa.com/t/addeventlistener-load-for-dynamically-loaded-script/644091/3 "2020-09-07T14:27:47Z")

</div>

Thank you for your quick response.  
Yo can check the JS code here: [https://codepen.io/Shrradhaa/pen/XWdVQYe?editors=1111](https://codepen.io/Shrradhaa/pen/XWdVQYe?editors=1111)  
I added this script in my component. I can see the load function in console but didn’t get the values.  
I want to modify the background of popup which is loading from dynamic script.

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [September 7, 2020, 2:42pm UTC](https://forum.kirupa.com/t/addeventlistener-load-for-dynamically-loaded-script/644091/4 "2020-09-07T14:42:14Z")

</div>

Your timing for loading the script is fine, but that script does not provide what you’re looking for right away. If there’s some API provided by that script that allows you to know when its done doing whatever it does, use that. Or if you’re just interested in styling a background, create a CSS file that will target that background automatically when it appears.

---

<div class="post-metadata">

### Author: ![Shraddha\_Ingale](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/shraddha_ingale/32/12399_2.png) [@Shraddha\_Ingale](https://forum.kirupa.com/u/Shraddha_Ingale)
#### Post date: [September 10, 2020, 6:50am UTC](https://forum.kirupa.com/t/addeventlistener-load-for-dynamically-loaded-script/644091/5 "2020-09-10T06:50:50Z")

</div>

Yes, you are right.  
But I believe here load is in async.  
Is there any event from which we can identify the complete loading of dynamic script?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [September 10, 2020, 7:37am UTC](https://forum.kirupa.com/t/addeventlistener-load-for-dynamically-loaded-script/644091/6 "2020-09-10T07:37:34Z")

</div>

You can listen to the **load** event. This tutorial goes into more detail: [https://www.kirupa.com/html5/loading\_script\_files\_dynamically.htm](https://www.kirupa.com/html5/loading_script_files_dynamically.htm)

```auto
let myScript = document.createElement("script");
myScript.setAttribute("src", "https://www.example.com/foo.js");
document.body.appendChild(myScript);

myScript.addEventListener("load", scriptLoaded, false);

function scriptLoaded() {
  console.log("Script is ready to rock and roll!");
}

```

🙂
