Why does my convert button do nothing on click?

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.

Solution

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>