Html - Why does my convert button do nothing on click?

Viper
January 13, 2025
29 views
0 votes
2 Answers

I’ve been trying to create a unit converter. One of the units is temperature. When I tried to convert from one temperature unit to another, however, the convert button did nothing.

Here is my code:

document.getElementById("confirm").addEventListener("click", function () {
    const inputTemp = parseFloat(document.getElementById("inputTemp").value);
    const inputUnit = document.getElementById("inputUnit").value;
    const outputUnit = document.getElementById("inputUnit").value;

    const conversions = {
        Celsius: {
            Fahrenheit: (temp) => temp * 9 / 5 + 32,
            Kelvin: (temp) => temp + 273.15,
            Celsius: (temp) => temp,
        },
        Fahrenheit: {
            Celsius: (temp) => (temp - 32) * 5 / 9,
            Kelvin: (temp) => (temp - 32) * 5 / 9 + 273.15,
            Fahrenheit: (temp) => temp,
        },
        Kelvin: {
            Celsius: (temp) => temp - 273.15,
            Fahrenheit: (temp) => (temp - 273.15) * 9 / 5 + 32,
            Kelvin: (temp) => temp,
        },

    }

    const result = conversions[inputUnit][outputUnit](inputTemp);
    document.getElementById("outputTemp").textContent = String(result || 0);

});

body {
    font-family: Montserrat, sans-serif;
    display: flex;
    justify-content: center;
    place-items: center;
    height: 100vh;
    background-color: #F4F4F9;

}

.container {
    background-color: #ffffff;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;

}

h1 {
    margin-bottom: 20px;
    font-size: 24px;

}

.inputs, .outputs {
    margin-bottom: 15px;

}

input, select, output, button {
    padding: 10px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: 0.5s ease-in-out;

}

button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;

}

button:hover {
    background-color: #0056b3

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Temperature | Unit Converter</title>
    <script src="../js/temp.js" defer></script>
    <link rel="stylesheet" href="../css/converters.css">
</head>
<body>
<div class="container">
    <div class="inputs">
        <input type="number" id="inputTemp" placeholder="Enter Length">
        <select id="inputUnit">
            <option value="celsius">Celsius</option>
            <option value="fahrenheit">Fahrenheit</option>
            <option value="kelvin">Kelvin</option>
        </select>
    </div>
    <div class="outputs">
        <select id="outputUnit">
            <option value="celsius">Celsius</option>
            <option value="fahrenheit">Fahrenheit</option>
            <option value="kelvin">Kelvin</option>
        </select>
        <output id="outputTemp">0</output>
    </div>
    <button id="confirm">Convert</button>
</div>
</body>
</html>

I thought it may be something to do with the DOM not loading in before the elements loaded in so I tried adding to the start of the JS code:
document.addEventListener("DOMContentLoaded", function () {
But that also didn’t work.

Answers

I noticed a few errors in your code.

outputUnit is receiving the inputUnit value.
conversions keys should be in lower case to match the value attributes, or the value attributes should match the upper case keys of conversions.

As I didn’t want to change the HTML, i just fixed the #2 changing the conversions keys to lower case.

document.getElementById("confirm").addEventListener("click", function () {
    const inputTemp = parseFloat(document.getElementById("inputTemp").value);
    const inputUnit = document.getElementById("inputUnit").value;
    const outputUnit = document.getElementById("outputUnit").value;

    const conversions = {
        celsius: {
            fahrenheit: (temp) => temp * 9 / 5 + 32,
            kelvin: (temp) => temp + 273.15,
            celsius: (temp) => temp,
        },
        fahrenheit: {
            celsius: (temp) => (temp - 32) * 5 / 9,
            kelvin: (temp) => (temp - 32) * 5 / 9 + 273.15,
            fahrenheit: (temp) => temp,
        },
        kelvin: {
            celsius: (temp) => temp - 273.15,
            fahrenheit: (temp) => (temp - 273.15) * 9 / 5 + 32,
            kelvin: (temp) => temp,
        },

    }
    
    const result = conversions[inputUnit][outputUnit](inputTemp);
    document.getElementById("outputTemp").textContent = String(result || 0);

});

body {
    font-family: Montserrat, sans-serif;
    display: flex;
    justify-content: center;
    place-items: center;
    height: 100vh;
    background-color: #F4F4F9;

}

.container {
    background-color: #ffffff;
    padding: 20px 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;

}

h1 {
    margin-bottom: 20px;
    font-size: 24px;

}

.inputs, .outputs {
    margin-bottom: 15px;

}

input, select, output, button {
    padding: 10px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: 0.5s ease-in-out;

}

button {
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;

}

button:hover {
    background-color: #0056b3

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Temperature | Unit Converter</title>
    <script src="../js/temp.js" defer></script>
    <link rel="stylesheet" href="../css/converters.css">
</head>
<body>
<div class="container">
    <div class="inputs">
        <input type="number" id="inputTemp" placeholder="Enter Length">
        <select id="inputUnit">
            <option value="celsius">Celsius</option>
            <option value="fahrenheit">Fahrenheit</option>
            <option value="kelvin">Kelvin</option>
        </select>
    </div>
    <div class="outputs">
        <select id="outputUnit">
            <option value="celsius">Celsius</option>
            <option value="fahrenheit">Fahrenheit</option>
            <option value="kelvin">Kelvin</option>
        </select>
        <output id="outputTemp">0</output>
    </div>
    <button id="confirm">Convert</button>
</div>
</body>
</html>

It is simple, inside your options you have used lower case "celsius" instead of uppercase "Celius" you have used inside your javascript const.

            <option value="celsius">Celsius</option>

should be:

            <option value="Celsius">Celsius</option>

you also need to fix another bug on your javascript 4th line:

const outputUnit = document.getElementById("inputUnit").value;

to this:

const outputUnit = document.getElementById("outputUnit").value;

fixed code:

document.getElementById("confirm").addEventListener("click", function () {
    const inputTemp = parseFloat(document.getElementById("inputTemp").value);
    const inputUnit = document.getElementById("inputUnit").value;
    const outputUnit = document.getElementById("outputUnit").value; // Corrected this line
    
    const conversions = {
        Celsius: {
            Fahrenheit: (temp) => temp * 9 / 5 + 32,
            Kelvin: (temp) => temp + 273.15,
            Celsius: (temp) => temp,
        },
        Fahrenheit: {
            Celsius: (temp) => (temp - 32) * 5 / 9,
            Kelvin: (temp) => (temp - 32) * 5 / 9 + 273.15,
            Fahrenheit: (temp) => temp,
        },
        Kelvin: {
            Celsius: (temp) => temp - 273.15,
            Fahrenheit: (temp) => (temp - 273.15) * 9 / 5 + 32,
            Kelvin: (temp) => temp,
        },
    };
    const result = conversions[inputUnit][outputUnit](inputTemp);
    console.log(result)
    document.getElementById("outputTemp").textContent = String(result || 0);
});

fixed html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Temperature | Unit Converter</title>
    <script src="../js/temp.js" defer></script>
    <link rel="stylesheet" href="../css/converters.css">
</head>
<body>
<div class="container">
    <div class="inputs">
        <input type="number" id="inputTemp" placeholder="Enter Length">
        <select id="inputUnit">
            <option value="Celsius">Celsius</option>
            <option value="Fahrenheit">Fahrenheit</option>
            <option value="Kelvin">Kelvin</option>
        </select>
    </div>
    <div class="outputs">
        <select id="outputUnit">
            <option value="Celsius">Celsius</option>
            <option value="Fahrenheit">Fahrenheit</option>
            <option value="Kelvin">Kelvin</option>
        </select>
        <output id="outputTemp">0</output>
    </div>
    <button id="confirm">Convert</button>
</div>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Why does my convert button do nothing on click?

Answers