Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida - Função - HTML + JavaScript]

Referente ao curso JavaScript: manipulando o DOM

por Leonardo de Alcântara Fróes
| 51k xp | 6 posts

Oi, pessoal, tudo bem?

Estou fazendo alguns exercícios por fora do curso e um deles foi criar uma calculadora que indica se é melhor abastecer um veículo com álcool ou gasolina. Ela está imprimindo um resultado, mas ele não está certo. Vocês conseguiriam me dar uma luz no que estou errando?

Os códigos HTML são: 

<!DOCTYPE html>
<html lang="pt-BR">
<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>Calculadora Álcool x Gasolina</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/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=Abel&display=swap" rel="stylesheet">
</head>
<body class="corpo">
    <main class="principal">
        <div class="titulo">
            <h1 class="titulo_h1">Calculadora<br>Preço de Combustível</h1>
        </div>
        <div class="precos">
            <p id="preco_alcool" class="preco_alcool">Digite o preço do Álcool: 
                <input type="number" name="preco_alcool" id="preco_alcool_valor" class="preco_alcool_valor">
            </p>
            <p id="preco_gasolina" class="preco_gasolina">Digite o preço da Gasolina:
                <input type="number" name="preco_gasolina" id="preco_gasolina_valor" class="preco_gasolina_valor">
            </p>
        </div>
        <div id="botao">
            <input type="button" value="Calcular !" class="botao" onclick="calcular()">
        </div>
        <div id="resultado" class="resultado">
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

Já o código JavaScript está assim: 

var preçoAlcool = parseFloat(document.getElementById("preço_alcool_valor"))
var preçoGasolina = parseFloat(document.getElementById("preço_gasolina_valor"))
var calculo = (preçoAlcool / preçoGasolina)

var res = document.querySelector(".resultado")

function calcular() {
    if (calculo >= 0.7) {
        res.innerHTML = "É melhor abastecer com gasolina."
    } else {
        res.innerHTML= "É melhor abastecer com álcool."
    }
}

É um exercício simples, mas como estou começando, estou quebrando a cabeça nele. Se alguém conseguir me ajudar, será ótimo!

Valeu, pessoal!

2 respostas
solução!
por Pierre Felipe dos Santos Silva
| 78.9k xp | 9 posts

Fala Leonardo, tudo certo?

Fiz testes no teu código e observei alguns pontos:

1- Utilização de cedilhas nos nomes do ID´s nas linhas 1 e 2. Revisa o teu código HTML e ajusta para os ID´s corretos na tuas primeiras variáveis declaradas. E também, não usa o parseFloat ou parseInt. Teus input´s são do tipo number e isso previne que os usuário usem apenas números. Mesmo assim, o valores digitados serão utilizados como strings. Mas o Javascript vai conseguir se virar em divisões de strings.

var precoAlcool = document.getElementById("preco_alcool_valor")
var precoGasolina = document.getElementById("preco_gasolina_valor")

3- A variável calculo precisa utilizar as variáveis precoAlcool e precoGasolina adicionadas da propriedade value dos elementos.

var calculo = precoAlcool.value/precoGasolina.value

A variável calculo precisa ser movida para dentro da função calcular para que seja atualizado o valor armazenado a cada clique do botão.

4- A função calcular faltavam apenas os retornos. Sem retorno o calculo é feito mas será carregado valor indefinido.

function calcular() {

  var calculo = precoAlcool.value/precoGasolina.value;

    if (calculo >= 0.7) {
       return res.innerHTML = "É melhor abastecer com gasolina."
    } else {
        return res.innerHTML= "É melhor abastecer com álcool."
    }

}

Com esses pequenos ajustes, vai rodar ;-)

por Leonardo de Alcântara Fróes
| 51k xp | 6 posts

Fala, Pierre! Tudo bem por aí?

Muito obrigado pela ajuda, cara!

Agora ta rodando direitinho!!

Um abraço!