External javascript file not work on html file

JavaScript
1

I tried variety of script tags position in HTML file but the js codes still not works. How exactly to link the js file with the HTML file?

//below is my HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="new.css">
    <script src="https://kit.fontawesome.com/0db4f2ae99.js" crossorigin="anonymous"></script>
    <title>little blog</title>
</head>
<body>
    <div class="header">
        <h2>No Context blog</h2>
        <button class="hamburger" id="hamburger">
            <i class="fas fa-bars"></i>
        </button>
        <ul class="nav-ul" id="nav-ul">
            <li><a href="#">About me</a></li>
            <li><a href="#">About me</a></li>
            <li><a href="#">About me</a></li>
        </ul>
    </div>
    <script src="new.js"></script>
</body>
</html>```
//end of HTML file

//this is my js file contents
const hamburger = document.getElementById(‘hamburger’);
const navUL = document.getElementById(‘nav-ul’);

hamburger.addEventListener(‘click’,() => {
navUL.classList.toggle(‘show’);
})

2

if you are working on VsCode be sure that the js file is in the same folder that the html, if is in another folder you have to put the correct route. Also a common mistake at least for me is to create the js file but not put “.js” check if your archive has the js extension

Also add a type to the script <script type="text/javascript" src="new.js"></script>

1 Like
3

Thank you for the solutions given. But, I have tried all of It but still don’t work.

4

What makes you think it isn’t working? Try adding a simple console.log to the js and see if it works.

1 Like
5

Thank you for the guidance. I just figured out the problem which is actually in my CSS file. I accidentally put the space between the main class and the toggle class “show”.
mistake:
.nav-ul .show
correction:
.nav-ul.show

6

That was what I suspected as well.

When you are testing something that depends on something else you need to rule out one thing at a time. The console.log will show you the JS is working which then tells you it must be something else that is wrong.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.