I need to convert Celsius to Fahrenheit, but I keep receiving NaN as an answer

As stated above I need this to convert temperatures and show the respective picture but all I get now is NaN for the resulting conversion.

I have been trying to fix it but can’t seem to find the issue.

Can someone please help?

window.addEventListener("DOMContentLoaded", domLoaded);

function domLoaded() {
    var convertButton = document.getElementById("convertButton");
    var cInput = document.getElementById("cInput");
    var fInput = document.getElementById("fInput");
    var weatherImage = document.getElementById("weatherImage");
    hideImage();//hide image initially
    convertButton.addEventListener("click", convertTemperature);
    cInput.addEventListener("input", () => {
        if (fInput.value.length > 0) {
            fInput.value = "";// to make other input empty when entering value in this
        }
    });
    fInput.addEventListener("input", () => {
        if (cInput.value.length > 0) {
            cInput.value = "";// to make other input empty when entering value in this
        }
    });

    function hideImage() {
        weatherImage.style.display = "none";
    }

}

function convertTemperature() {
    var cInput = document.getElementById("cInput");
    var fInput = document.getElementById("fInput");
    var weatherImage = document.getElementById("weatherImage");
    var errorMessage = document.getElementById("errorMessage");
    if (cInput.value.length > 0) {// if input not empty
        if (checkErrorInput(cInput.value)) {// runs while input is valid
            fInput.value = convertCtoF(parseFloat(cInput.value));
            showImage(parseFloat(fInput.value));// To show respective gifs
        }
    } else if (fInput.value.length > 0) { // if input not empty
        if (checkErrorInput(fInput.value)) { // runs while input is valid
            cInput.value = convertFtoC(parseFloat(fInput.value));
            showImage(parseFloat(fInput.value));// To show respective gifs
        }
    } else {
        errorMessage.innerText = "please enter temperature";
    }

    function checkErrorInput(input) {
        if (isNaN(parseFloat(input))) {
            errorMessage.innerHTML = input + " is not a number";
            return false;  // input is not valid throws error and returns false
        } else {
            errorMessage.innerHTML = "";
            return true;  // valid input
        }
    }

    function showImage(f) {
        if (fInput < 32) {
            weatherImage.src = "cold.png";// set src attribute to cold gif
            weatherImage.alt = "cold png";
        } else if (fInput >= 32 && f <= 50) {
            weatherImage.src = "cool.png";//set src attribute to gif
            weatherImage.alt = "cool png";
        } else {
            weatherImage.src = "warm.png"; //set src attribute to gif
            weatherImage.alt = "warm png";
        }
        weatherImage.style.display = "block";
    }

}

document.addEventListener("DOMContentLoaded", domLoaded);//run when dom content is loaded

function convertCtoF(degreesCelsius) {
    return cInput * (9 / 5) + 32;
}

function convertFtoC(degreesFahrenheit) {
    return (fInput - 32) * 5 / 9;
}

Any help would be greatly appreciated!

Answer

cInput and fInput are domelements (tags) but, at

function convertCtoF(degreesCelsius) {
return cInput * (9 / 5) + 32;
}

function convertFtoC(degreesFahrenheit) {
return (fInput - 32) * 5 / 9;
}

they are used as variables, you need to use cInput.value|fInput.value / use some variable and then assign it wherever you want.

Hope it will rectify yours.

Advertisement

Answer