isNaN不验证字段是否已填充

var result;
var gasoline = document.getElementById("gasolina").value
var alcohol = document.getElementById("alcool").value
var converte = parseInt(gasolina)
function calculo(){
valor = document.getElementById("text")
var calculando = function calculando(){
var divisao = newAlcool % newGasolina
if(divisao > 0.75){
result = "Gasoline is better"
valor.innerHTML = `${result}`
}else{
result = "alcohol is better"
valor.innerHTML = `${result}`
}
}
if(!alcohol || !gasoline || isNaN(alcohol) || isNaN(gasoline)){
result = "Please fill in the required field"
valor.innerHTML = `${result}`
}else{
newGasolina = parseInt(gasoline)
newAlcool = parseInt(alcohol)
calculando()
}
}

*{
background-image: url('img/Background.png');
background-size: 100%;
font-family: 'Prompt', sans-serif;
color: black;
}
.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: 0;
border: none;
background: none;
}
.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;
}
a{
text-align: center;
border:none;
background: transparent;
outline: none;
}
p{
background: transparent;
}

<!DOCTYPE html>
<html lang="en">
<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>Alcool ou Gasolina</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">
<script src="main.js"></script>
</head>
<body>
<header id="header">
<!--<div><img src="img/Logo App.png" alt="Alcool Ou Gasolina" class="logo"></div>-->
<h1>Vamos Comparar qual e o melhor para o seu carro entre alcool e gasolina </h1>
<h1 class="txtmenor"><div>Alcool&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Gasolina</div> </h1>

<div><input type="number" name="" id="gasolina" placeholder="Ex:0.00" min="0">
<input type="number" name="" id="alcool" placeholder="Ex:0.00" min="0"><br></div>
<a hidden href="http://127.0.0.1:5500/calcular.html"> <p> Entenda o calculo </p></a> 
<div><button onclick="calculo()" class="calcular" id="calcular">calculo</button></div>
<h1 id="text"></h1>
</header>
</body>
</html>

我尝试了很多方法来这个代码工作，但不工作我的目标是计算什么是更好的酒精或汽油，但我的isNaN不验证字段是否为空。仍然不工作，它一直显示"请填写所需";字段，不管是否填充。我的函数可能不工作，我不确定

我代码:

var result;
var gasoline = document.getElementById("gasolina").value
var alcohol = document.getElementById("alcool").value
var converte = parseInt(gasolina)
function calculo(){
valor = document.getElementById("text")
var calculando = function calculando(){
var divisao = newAlcool % newGasolina
if(divisao > 0.75){
result = "Gasoline is better"
valor.innerHTML = `${result}`
}else{
result = "alcohol is better"
valor.innerHTML = `${result}`
}
}
if(!alcohol || !gasoline || isNaN(alcohol) || isNaN(gasoline)){
result = "Please fill in the required field"
valor.innerHTML = `${result}`
}else{
newGasolina = parseInt(gasoline)
newAlcool = parseInt(alcohol)
calculando()
}
}

如果你想检查isNaN，那么更新你的If条件

if(!alcohol || !gasoline || isNaN(alcohol) || isNaN(gasoline)) { 
}

和更新你的代码，因为你没有得到值，你只得到HTML元素。

var gasoline = document.getElementById("gasolina").value;
var alcohol = document.getElementById("alcool").value;

因为isNaN("")总是false。

相关内容

最新更新

热门标签：