Linking html with JS

Tell us what’s happening:

Hello guys, please am trying to link my html to JavaScript but it not working out for me, please can anyone me out, Thank in advance.

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css">
    <title>my contact</title>
</head>
<body>
    <div class="container">
        <h1 class="center-align">My Contact</h1>
        <input type="text" id="filterInput" placeholder="search name...">
        <ul id="names" class="collecton with-header">
            <li class="collecton-header">
                <h5>A</h5>
            </li>
            <li class="collecton-items">
                <a href="#">Abel</a>
            </li>
            <li class="collecton-items">
                <a href="#">Adam</a>
            </li>
            <li class="collecton-items">
                <a href="#">Alan</a>
            </li>
            <li class="collecton-items">
                <a href="#">Ann</a>
            </li>
            <li class="collecton-items">
                <a href="#">Annbel</a>
            </li>
            <li class="collecton-header">
                <h5>B</h5>
            </li>
            <li class="collecton-items">
                <a href="#">Beth</a>
            </li>
            <li class="collecton-items">
                <a href="#">Bill</a>
            </li>
            <li class="collecton-items">
                <a href="#">Bob</a>
            </li>
            <li class="collecton-items">
                <a href="#">Brad</a>
            </li>
            <li class="collecton-items">
                <a href="#">Brady</a>
            </li>
            <li class="collecton-header">
                <h5>C</h5>
            </li>
            <li class="collecton-items">
                <a href="#">Cassy</a>
            </li>
            <li class="collecton-items">
                <a href="#">Cassie</a>
            </li>
            <li class="collecton-items">
                <a href="#">Carrie</a>
            </li>
            <li class="collecton-items">
                <a href="#">Cathy</a>
            </li>
            <li class="collecton-items">
                <a href="#">Courtney</a>
            </li>
        </ul>
    </div>
    <script src="main.js" type="text/javascript"></script>
</body>
</html>




```js
let filterInput = document.getElementById('filterInput');
filterInput.addEventListener('key', filterNames);
function filterNames(){
    console.log(1)
};

You need to put your JS in script tags:

<script>js here</script>

this is what I did and its not working:

<script src="main.js" type="text/javascript"></script>

this is what I did and its not working out:

<script src="main.js" type="text/javascript"></script>

Is the .js file in the same folder as your html?

If it’s not, either it needs to be or you need to put the file path in front of main.js

the js file is in the same folder with html

The problem is likely Tirjasdyn suggestion or a javascript error.

I always suggest using an absolute path /main.js which ensures it will check for the file from server’s document root.

One way you can check if the file is there is to simply type it into your url.

So if your site is www.twalow.com and your js file is in js folder,… you simply do www.twalow.com/js/myjsfile.js

If the file doesnt show then you have the wrong path.

In your case it would be www.yourwebsite.com/yourjsfile.js

I recommend you learning about developer tools and clicking the network tab. It will tell you specifically what error occurs upon trying to load it. It’s likely a 404.

Find out which directory your html files are in and ensure your JS file is in folder. If you want a different folder you’ll have to specify it, starting from the server’s webroot directory.

I think the issue is from VS code live server, am trying to figure out why it not run JavaScript and this the link below:

 <script src="/myapp/main.js" type="text/javascript"></script>