Button works locally but not when deployed

Hello new to all this. But as the title suggests, my code works fine locally. The convert button does its job. However when i deploy it to netlify the button stops working.

This is the site that i having an issue with.


    <head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
        <link rel="stylesheet" href="index.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
        <div id="container">
            <div id="title-container">
                <h1>Metric/Imperial Unit Conversion</h1>
                <input id="input-field" type="text">
                <button type="submit" id="convert-btn">Convert</button>
            <div id="result-container">
                <div id="length-container">
                    <h3>Length (Meter/Feet)</h3>
                        <p id="length-html"></p>
                <div id="volume-container">
                    <h3>Volume (Liters/Gallons)</h3>
                        <p id="volume-html"></p>
                <div id="mass-container">
                    <h3>Mass (Kilograms/Pounds)</h3>
                        <p id="mass-html"></p>
         <script src="index.js"></script>


const input = document.getElementById("input-field")
const convertBtn = document.querySelector("#convert-btn")
const lengthHtml = document.getElementById("length-html")
const volumeHtml = document.getElementById("volume-html")
const massHtml = document.getElementById("mass-html")

convertBtn.addEventListener("click", function(){

function floorNum(num){
    return Math.floor(num * 1000) / 1000

function convertLength(){
   const meterConversion = input.value * 3.281
   const feetConversion = input.value / 3.281
   lengthHtml.innerHTML = `${input.value} meters = ${floorNum(meterConversion)} feet | ${input.value} feet = ${feetConversion.toFixed(3)} meters`

function convertVolume(){
    const literConversion = input.value * 0.264
    const gallonConversion = input.value / 0.264
    volumeHtml.innerHTML = `${input.value} liters = ${literConversion.toFixed(3)} gallons | ${input.value} gallons = ${gallonConversion.toFixed(3)} liters`

function convertMass(){
    const kiloConversion = input.value * 2.204
    const poundConversion = input.value / 2.204
    massHtml.innerHTML = `${input.value} kilos = ${kiloConversion.toFixed(3)} pounds | ${input.value} pounds = ${poundConversion.toFixed(3)} kilos`

The index.js isn’t found

A wild guess is that @gs131 is probably using Vite, and as with a great deal of people using Vite, either didn’t read the Getting Started documentation or didn’t see this note:

Vite treats index.html as source code and part of the module graph. It resolves <script type="module" src="..."> that references your JavaScript source code. Even inline <script type="module"> and CSS referenced via <link href> also enjoy Vite-specific features.

If you are using Vite, and you run your build command locally, (not your development command), you’ll find that it’s also showing a warning concerning it.

You need to adjust your html to match what Vite wants.


You’re right. Vite was the issue. I need to look up more on what vite does.
Thank you.

Thank you for confirming this was the cause! This is good to know!