How to get NaN to not show in text box-CodePudding

I'm new to javascript and I'm working on an assignment for a temp convertor and meters to feet convertor. My issue is 2 things. 1 the error message I'm wanting to display is located in the div tag and I can't figure out how to hide it so it's not showing from the opening of the page and then have it pop up towards to top of the page when the user enters in anything that is NaN. I'm able to use .textContent to get the error to show up when and where I need it to on the JS side but we are supposed to show the error message in the div tag in the html doc only

My 2nd issue is when the user does enter anything that is NaN. The textbox shows NaN and if I try changing or anything up it errors out. I've tried using parseInt as I have a seen a couple things say that should fix it but I just continue to get errors when I try that. Any help would be much appreciated as I'm completely stuck. My code is below:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The Converterlator&#174;</title>
    <link rel="stylesheet" href="convert_temp.css">
    <script src="convert_temp.js"></script>
</head>
<body>
    <main>
        <h1>The Converterlator&#174;</h1> 
        <div id="message"></div>
        <div>
            <input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to 
    Celsius
            <br>
            <input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit
            <br>
            <input type="radio" name="conversion_type" id="to_meters">Feet to Meters
            <br>
            <input type="radio" name="conversion_type" id="to_feet">Meters to Feet
        </div>
        <div>
        <label id="label_1">Enter F degrees:</label>
        <input type="text" id="value_entered">
    </div>
    <div>
        <label id="label_2">Degrees Celsius:</label>
        <input type="text" id="value_computed" disabled>
    </div>
    <div>
        <label></label>
        <input type="button" id="convert" value="Convert" />
        <div id="message">"Please enter a valid number"</div>
    </div> 
</main>

Javascript:

"use strict";

const $ = selector => document.querySelector(selector);
const calculateCelsius = temp => (temp-32) * 5/9;
const calculateFahrenheit = temp => temp * 9/5   32;
const calculateMeters = feet => feet * 0.3048;
const calculateFeet = meters => meters / 0.3048;


const toggleDisplay = (label1Text, label2Text) => {
    // update labels and clear disabled textbox
    $("#label_1").textContent = label1Text;
    $("#label_2").textContent = label2Text;
    $("#value_computed").value = "";

    // select text in degrees textbox
    $("#value_entered").select();
};


    
const focusAndSelect = selector => {
    const elem = $(selector);
    elem.focus();
    elem.select();
};

/****************************
*  event handler functions  *
*****************************/
const performConversion = () => {
    console.log("performConversion function has started");

    let error = " ";
    if (isNaN($("#value_entered").value)) {
        console.error("Invalid Entry");
        //error.textContent = "Please enter a valid number"//
        //error.style.color = "red"//
        focusAndSelect("#value_entered");
    } else {
        error = "";
    }

    const userInput = $("#value_entered").value;
    if ($("#to_celsius").checked == true) {
        console.log("calculating celsius");
        const celsius = calculateCelsius(userInput);
        $("#value_computed").value = celsius.toFixed(2);
    } else if ($("#to_fahrenheit").checked == true) {
        console.log("calculating fahrenheit");
        const fahrenheit = calculateFahrenheit(userInput);
        $("#value_computed").value = fahrenheit.toFixed(2);
    } else if ($("#to_meters").checked == true) {
        console.log("calculating meters");
        const meters = calculateMeters(userInput);
        $("#value_computed").value = meters.toFixed(2);
    } else if ($("#to_feet").checked = true) {
        console.log("calculating feet");
        const feet = calculateFeet(userInput);
        $("#value_computed").value = feet.toFixed(2);
    }
};

const toggleToCelsius = () => toggleDisplay("Enter F degrees:", "Degrees Celsius:");
const toggleToFahrenheit = () => toggleDisplay("Enter C degrees:", "Degrees Fahrenheit:");
const toggleToFeet = () => toggleDisplay("Enter Meters:", "Feet:");
const toggleToMeters = () => toggleDisplay("Enter Feet:", "Meters:");


document.addEventListener("DOMContentLoaded", () => {
    // add event handlers
    $("#convert").addEventListener("click", performConversion);
    $("#to_celsius").addEventListener("click", toggleToCelsius);
    $("#to_fahrenheit").addEventListener("click", toggleToFahrenheit);
    $("#to_feet").addEventListener("click", toggleToFeet);
    $("#to_meters").addEventListener("click", toggleToMeters);

    // move focus
    $("#value_entered").focus();
});

CodePudding user response：

I updated performConversion to:

const performConversion = () => {
    console.log("performConversion function has started");

    let message = $("#message");
    if (Number.isNaN( $("#value_entered").value)) {
        console.error("Invalid Entry");
        message.textContent = "Please enter a valid number";
        message.style.color = "red";
        $("#value_entered").value = "NaN";
        focusAndSelect("#value_entered");
    } else {
        message.textContent = "";
    }
...

Here is the working result

"use strict";

const $ = selector => document.querySelector(selector);
const calculateCelsius = temp => (temp-32) * 5/9;
const calculateFahrenheit = temp => temp * 9/5   32;
const calculateMeters = feet => feet * 0.3048;
const calculateFeet = meters => meters / 0.3048;


const toggleDisplay = (label1Text, label2Text) => {
    // update labels and clear disabled textbox
    $("#label_1").textContent = label1Text;
    $("#label_2").textContent = label2Text;
    $("#value_computed").value = "";

    // select text in degrees textbox
    $("#value_entered").select();
};


    
const focusAndSelect = selector => {
    const elem = $(selector);
    elem.focus();
    elem.select();
};

/****************************
*  event handler functions  *
*****************************/
const performConversion = () => {
    console.log("performConversion function has started");

    let message = $("#message");
    if (Number.isNaN( $("#value_entered").value)) {
        console.error("Invalid Entry");
        message.textContent = "Please enter a valid number";
        message.style.color = "red";
        $("#value_entered").value = "NaN";
        focusAndSelect("#value_entered");
    } else {
        message.textContent = "";
    }

    const userInput = $("#value_entered").value;
    if ($("#to_celsius").checked == true) {
        console.log("calculating celsius");
        const celsius = calculateCelsius(userInput);
        $("#value_computed").value = celsius.toFixed(2);
    } else if ($("#to_fahrenheit").checked == true) {
        console.log("calculating fahrenheit");
        const fahrenheit = calculateFahrenheit(userInput);
        $("#value_computed").value = fahrenheit.toFixed(2);
    } else if ($("#to_meters").checked == true) {
        console.log("calculating meters");
        const meters = calculateMeters(userInput);
        $("#value_computed").value = meters.toFixed(2);
    } else if ($("#to_feet").checked = true) {
        console.log("calculating feet");
        const feet = calculateFeet(userInput);
        $("#value_computed").value = feet.toFixed(2);
    }
};

const toggleToCelsius = () => toggleDisplay("Enter F degrees:", "Degrees Celsius:");
const toggleToFahrenheit = () => toggleDisplay("Enter C degrees:", "Degrees Fahrenheit:");
const toggleToFeet = () => toggleDisplay("Enter Meters:", "Feet:");
const toggleToMeters = () => toggleDisplay("Enter Feet:", "Meters:");


document.addEventListener("DOMContentLoaded", () => {
    // add event handlers
    $("#convert").addEventListener("click", performConversion);
    $("#to_celsius").addEventListener("click", toggleToCelsius);
    $("#to_fahrenheit").addEventListener("click", toggleToFahrenheit);
    $("#to_feet").addEventListener("click", toggleToFeet);
    $("#to_meters").addEventListener("click", toggleToMeters);

    // move focus
    $("#value_entered").focus();
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>The Converterlator&#174;</title>
    <link rel="stylesheet" href="convert_temp.css">
    <script src="convert_temp.js"></script>
</head>
<body>
    <main>
        <h1>The Converterlator&#174;</h1> 
        <div id="message"></div>
        <div>
            <input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to 
    Celsius
            <br>
            <input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit
            <br>
            <input type="radio" name="conversion_type" id="to_meters">Feet to Meters
            <br>
            <input type="radio" name="conversion_type" id="to_feet">Meters to Feet
        </div>
        <div>
        <label id="label_1">Enter F degrees:</label>
        <input type="text" id="value_entered">
    </div>
    <div>
        <label id="label_2">Degrees Celsius:</label>
        <input type="text" id="value_computed" disabled>
    </div>
    <div>
        <label></label>
        <input type="button" id="convert" value="Convert" />
        <div id="message"></div>
    </div> 
</main>