Why is my JavaScript not working on my Netlify Website?

Support
1

I recently deployed a site to netifly, and the html and css work for the website, but for some reason the java script doesn’t work at all. You can’t click the buttons whatsoever.

<html>
    <head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="container">
            <h1>Penguin Counter</h1>
            <h2 id="count-el">0</h2>
            <button id="increment-btn" onclick="increment()">INCREMENT</button>
            <button id="save-btn" onclick="save()">SAVE</button>
            <p id="save-el">Previous entries: </p>
        </div>
        <script src="index.js">
        </script>
    </body>
</html>

let saveEl = document.getElementById("save-el")
let countEl = document.getElementById("count-el")
let count = 0

function increment() {
    count += 1
    countEl.textContent = count
}

function save() {
    let countStr = count + " - "
    saveEl.textContent += countStr
    countEl.textContent = 0
    count = 0
}

here is my site: My Website

2

@PocroLoco You should check what your JavaScript file is called, and where it is located, as it’s not being found:

image

1 Like
3

I have the file in the root of my files right next to my html and css,

image
image912×430 17.7 KB

4

@PocroLoco That may be the case, but I can see information in that screenshot that you haven’t provided yet.

You have a vite.config.js file there, so you’re probably using Vite, and you’re probably deploying the dist folder.

Is that correct?

See how in my screenshot your index.css file is index-51d0d1c3.css

If you check the build log, or run your build locally, you will probably find that it is giving a warning along the lines of:

<script src="index.js"> in "index.html" can't be bundled without type="module" attribute

The answer to which is to change your script tag to:

<script src="index.js" type="module"></script>
1 Like
5

I have no idea what is vite is to be honest, sorry as I’m very new to all these things. I downloaded this from scrimba.com after I made this so they are probably using it to run their emulator? i have no clue. Do I even need that file?

6

How about sharing a link to the repository rather than just a screenshot @PocroLoco. Would save a lot of time and guesswork.

7

That’s true. Sorry everyone as I’m not used to the whole forum thing. I actually remade this project and just have only the three files (html,css,js) , and it works perfectly fine.

I think what @nathanmartin was saying about vite 100% caused the issue. Thank you so much for lertting me know and I’ll use proper format next time

8

@PocroLoco There’s no problem with using Vite, and had you made the change that I indicated it would have fixed the issue that you raised.

But if you don’t understand it, then switching to plain HTML, CSS & JS is a good move.

1 Like