堆栈内存溢出
  繁体   English   中英

如何让 NaN 不在文本框中显示

[英]How to get NaN to not show in text box

 原文  2022-01-04 05:50:49  0   1    javascript/ html/ function

问题描述

我是 javascript 的新手，我正在处理温度转换器和米到英尺转换器的任务。 我的问题是两件事。 1 我要显示的错误消息位于 div 标签中，我无法弄清楚如何隐藏它，因此它不会从页面打开时显示，然后让它弹出到页面顶部时用户输入任何为 NaN 的内容。 我可以使用 .textContent 来获取错误，以便在我需要它的时间和地点在 JS 端显示错误消息，但我们应该在 html 文档的 div 标记中显示错误消息

我的第二个问题是当用户输入任何是 NaN 的时候。 文本框显示 NaN，如果我尝试更改或其他任何内容，它就会出错。 我已经尝试使用 parseInt，因为我看到一些事情说应该修复它，但是当我尝试时我只是继续得到错误。 任何帮助将不胜感激，因为我完全陷入困境。 我的代码如下：

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();
});

1 个解决方案

解决方案1
 0  2022-01-04 06:10:27

我将performConversion更新为：

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 = "";
    }
...

这是工作结果

 "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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 输入文本框获取 NaN 值 如何在JavaScript和HTML代码的文本框中摆脱NaN？ 如何摆脱JavaScript代码中文本框中的NaN？ 如何获取显示文本框，更改下拉列表时 如何获取一个文本框的运行时值并使用javascript将其显示到另一个文本框 如何在div中显示文本框 在文本框中显示 NaN 的函数 在javascript中添加其他文本框值之前，如何避免文本框中的NaN 如何让数字显示在警报框中而不是 NAN 如何摆脱NaN / NaN / NaN
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM