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.
Thanks.
This is the site that i having an issue with.
https://main--mellow-snickerdoodle-8f1248.netlify.app/
html
<html>
<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">
</head>
<body>
<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>
<div id="result-container">
<div id="length-container">
<h3>Length (Meter/Feet)</h3>
<p id="length-html"></p>
</div>
<div id="volume-container">
<h3>Volume (Liters/Gallons)</h3>
<p id="volume-html"></p>
</div>
<div id="mass-container">
<h3>Mass (Kilograms/Pounds)</h3>
<p id="mass-html"></p>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
js
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(){
convertLength()
convertVolume()
convertMass()
})
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`
}
