What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

Question

What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

After researching various image sliders online, I came across this specific one. It worked perfectly fine when I included the JavaScript directly in a script tag within the HTML file. However, as soon as I tried to link it via a .js file, the slider stopped functioning, and I couldn't determine the root cause of the issue. The console output indicated an error reading "addEventListener" at line 10. Any insights or assistance would be greatly appreciated!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow: hidden;
}
.
.
.
</footer>
</main>
</body>
</html>

javascript html css

Answer 1

Answer №1

As @evolutionxbox mentioned, it's important to ensure that your JavaScript is included in the right place. If the JS is included in the header or before the elements it references in the HTML, those elements may be null when the script runs.

To avoid this issue, you should make sure your script runs after the document is fully loaded. One way to do this is by wrapping your code in a function and attaching it to the window onload event.

Your script setup could look like this:

function yourScript(){
/* Your script goes here */
}

window.addEventListener("load", yourScript);

Alternatively, you can use:

window.addEventListener("DOMContentLoaded", yourscript);

This will run your script after the DOM has been parsed, but before all external content like images have finished loading. This should work well for most scripts.

Answer 2

As @evolutionxbox mentioned, it's important to ensure that your JavaScript is included in the right place. If the JS is included in the header or before the elements it references in the HTML, those elements may be null when the script runs.

To avoid this issue, you should make sure your script runs after the document is fully loaded. One way to do this is by wrapping your code in a function and attaching it to the window onload event.

Your script setup could look like this:

function yourScript(){
/* Your script goes here */
}

window.addEventListener("load", yourScript);

Alternatively, you can use:

window.addEventListener("DOMContentLoaded", yourscript);

This will run your script after the DOM has been parsed, but before all external content like images have finished loading. This should work well for most scripts.

What is the reason this JavaScript code functions properly within a <script> tag but not when placed in a separate .js

Answer №1

Similar questions

Place an image in the middle of a div

Error in Typescript index: iterating over properties of a typed object

"Enhancing the user experience: Triggering a window resize event in jQuery before page load on Magento

Determine the elapsed time in seconds between two specified moments

lines stay unbroken in angular

Get the package from a Lerna-managed monorepository using a git URL

Increasing height for individual Bootstrap cards, without affecting all cards within the same row

Is there a way to emphasize a particular day on the calendar obtained from the URL?

The table contained within a row-spanning cell fails to fully occupy the cell's height across different browsers

Setting a port in Next.js: A step-by-step guide

My divs seem to overlap in strange, unpredictable ways depending on the zoom level - it's an odd phenomenon that occurs

update the dropdown values in the database by submitting the form

Seeking guidance on utilizing JavaScript for implementing an onclick event

Displaying VueJS property inside an array of HTML elements

Utilize Protractor Selenium to extract content from a popup window

What method can be used to obtain a parallel vector on a plane that has been struck by an intersecting ray?

Issue with Angular and Karma: HTTP GET request not running

If the image is not found, add a count instead of showing a new one each time

Javascript splice method mistakenly eliminating the incorrect elements

Initiate the IE driver in WebDriver NodeJS with the option to disregard protected mode settings and possibly introduce flakiness