酒精汽油性价比计算器JS代码isNaN无法校验输入字段问题求解

• 输入框值获取时机错误：你将gasoline、alcohol的取值逻辑写在了函数外部，页面加载完成后就会立刻执行，此时用户还未输入任何内容，这两个变量始终是空值，导致校验永远不通过。
• 脚本加载顺序错误：原代码将JS脚本放在<head>标签中，执行时页面DOM还未渲染完成，document.getElementById直接返回空，取值逻辑完全失效。
• 数值转换错误：油价是带小数的浮点数，用parseInt会直接舍弃小数部分，导致计算结果错误。
• 计算逻辑错误：原代码误用取余运算符%，实际需求应为酒精价格除以汽油价格，对比比值是否大于0.75判断哪种燃料更划算。
• 变量声明缺失：多处变量未加声明关键字，会隐式成为全局变量，可能引发不可预知的异常。

HTML代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒精汽油性价比计算器</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap" rel="stylesheet">
</head>
<body>
    <header id="header">
    <!--<div><img src="img/Logo App.png" alt="酒精汽油计算器" class="logo"></div>-->
    <h1>计算酒精和汽油哪种更适合你的车辆</h1>
    <h1 class="txtmenor"><div>酒精&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;汽油</div> </h1>
    
    <div>
        <input type="number" name="" id="gasolina" placeholder="例：7.58" min="0" step="0.01">
        <input type="number" name="" id="alcool" placeholder="例：5.29" min="0" step="0.01"><br>
    </div>
    <a hidden href="#"> <p> 了解计算规则 </p></a> 
    <div><button onclick="calculo()" class="calcular" id="calcular">开始计算</button></div>
    <h1 id="text"></h1>
</header>
<!-- 脚本移到body末尾，确保DOM加载完成后再执行 -->
<script src="main.js"></script>
</body>
</html>

JavaScript代码 #

function calculo(){
    // 每次点击都重新获取最新的输入值
    const gasoline = document.getElementById("gasolina").value
    const alcohol = document.getElementById("alcool").value
    const valor = document.getElementById("text")
    let result

    // 校验输入合法性
    if(!alcohol || !gasoline || isNaN(Number(alcohol)) || isNaN(Number(gasoline)) || Number(alcohol)<=0 || Number(gasoline)<=0){
        result = "请填写有效的价格信息"
        valor.innerHTML = result
        return
    }

    // 转换为浮点数计算
    const gasolinaPrice = parseFloat(gasoline)
    const alcoolPrice = parseFloat(alcohol)
    // 计算酒精价格和汽油价格的比值
    const ratio = alcoolPrice / gasolinaPrice
    if(ratio > 0.75){
        result = "汽油更划算"
    }else{
        result = "酒精更划算"
    }
    valor.innerHTML = result
}

CSS代码 #

/* 仅给body加背景，避免所有元素叠加背景 */
body{
    background-image: url('img/Background.png');
    background-size: 100%;
    font-family: 'Prompt', sans-serif;
    color: black;
    margin: 0;
    padding: 20px;
}

.txtmenor{
    font-size: 15px;
}

div{
    text-align: center;
    border:none;
    background: transparent;
    outline: none;
}
.logo{
    width: 150px;
    background: transparent;
}

h1{
    background: transparent;
    align-items: center;
    text-align: center;
    font-size: 18px;
    margin-bottom: 0px;
}

.calcular{
    margin-top: 15px;
    align-items: center;
    text-align: center;
    background: transparent;
    padding: 10px 20px;
    border: 1px solid #314591;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 16px;
}

.calcularimg{
    width: 150px;
    text-align: center;
    background: transparent;
    border-radius: 10px;
}

input{   
    margin: 0;
    color: #314591;
    background:  white;
    text-align: center;
    background-image: none;
    margin-right: 10px;
    padding: 5px;
    width: 120px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

a{
    text-align: center;
    border:none;
    background: transparent;
    outline: none;
}
p{
    background: transparent;
}

内容的提问来源于stack exchange，提问作者Gaby