isNaN doesnt verify if the fields are filled

Question

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>

I tried many ways to this code work but doesnt work my objective is calculate what is better alcohol or gasoline but my isNaN doesnt verify if the fields are empty.still doesnt work it keeps showing "Please fill in the required" field regardless of whether it is filled. and my function maybe doesnt work im not sure

my code:

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

}

`alcohol` is a reference to an `HTMLElement`, not a string or a number. `isNaN` returns false only if the specified value is a number, or a string that can be coerced into a number. — Heretic Monkey, Sep 05 '21 at 20:31
Does this answer your question? [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — Sebastian Simon, Sep 05 '21 at 20:33
I'm not seeing a `.value` anywhere in the code. Also, to notify people, use the @ followed by few letters of the name. Also, this question would be easier to answer if you provided a [mre]. You can use Stack Snippets (icon looks like `<>` in the editor toolbar) to do so. — Heretic Monkey, Sep 05 '21 at 21:02
You're still only getting the value on load, not when the user clicks the button. The result of the `if` condition will always be the same because `alcohol` and `gasoline` are always the same. — Heretic Monkey, Sep 05 '21 at 21:21
Use logic. If you need to get the value every time you click the button, where should you put the code that gets the value? In the function that is called when you click the button. — Heretic Monkey, Sep 05 '21 at 21:33

Rahul · Answer 1 · 2021-09-05T20:34:28.917

2

If checking isNaN you want, then update your if condition

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

}

and update your code, because your not getting value, you are only getting HTML element.

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

because isNaN("") will always be false.

edited Sep 05 '21 at 20:34

answered Sep 05 '21 at 20:32

Rahul

5,594
7
38
92

thank u for help but still doesnt work it keeps showing Please fill in the required field regardless of whether it is filled. – Gaby Sep 05 '21 at 20:54

isNaN doesnt verify if the fields are filled

1 Answers1