Posto de gasolina | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Boa noite! Eu fiz um programa para calcular km/L e R$/km, e deu certo, mas fiz com o prompt, não com os botões. navegador. Têm como fazer com um botão, armazenando mais de uma informação e assim calcular o que se pede? Meu código:

<meta charset="UTF-8">



<script>
function pulaLinha(){
        document.write("<br>");
        document.write("<br>");
    }

    function mostra(frase){
        document.write(frase);
        pulaLinha();
    }

var alcool = prompt("Digite a quantidade de alcool em L");
var km = prompt("Digite a quantidade de km percorrida");
var dinheiro = prompt("Digite a quantidade de dinheiro gasto no abastecimento");
var calculo = km / alcool;
var segundoCalculo = dinheiro / km;

 mostra("A quantidade de km/l com o abastecimento com álccol é " + calculo);
 mostra("A quantidade de reais pagos por km é " + segundoCalculo);

Oi Flavio! Tudo bem?

Para substituir os prompts por botões e campos de entrada no HTML para calcular km/L e R$/km podemos usar um formulário simples com campos de entrada e um botão para calcular os valores.

Aqui está uma versão do seu código com botões e campos de entrada:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Posto de Gasolina</title>
    <script>
        function calcular() {
            var alcool = parseFloat(document.getElementById("alcool").value);
            var km = parseFloat(document.getElementById("km").value);
            var dinheiro = parseFloat(document.getElementById("dinheiro").value);

            var calculo = km / alcool;
            var segundoCalculo = dinheiro / km;

            document.getElementById("resultado1").innerText = "A quantidade de km/l com o abastecimento com álcool é " + calculo.toFixed(2);
            document.getElementById("resultado2").innerText = "A quantidade de reais pagos por km é " + segundoCalculo.toFixed(2);
        }
    </script>
</head>
<body>
    <h1>Calculadora de Consumo</h1>
    <form>
        <label for="alcool">Quantidade de álcool (L):</label>
        <input type="number" id="alcool" step="0.01"><br><br>

        <label for="km">Quantidade de km percorrida:</label>
        <input type="number" id="km" step="0.01"><br><br>

        <label for="dinheiro">Quantidade de dinheiro gasto (R$):</label>
        <input type="number" id="dinheiro" step="0.01"><br><br>

        <button type="button" onclick="calcular()">Calcular</button>
    </form>

    <p id="resultado1"></p>
    <p id="resultado2"></p>
</body>
</html>

Neste código, criamos um formulário com três campos de entrada para a quantidade de álcool, a quantidade de km percorrida e a quantidade de dinheiro gasto. O botão "Calcular" chama a função calcular(), que realiza os cálculos e exibe os resultados em parágrafos (<p>) na página.

Espero ter ajudado!

Um forte abraço e bons estudos!

Mergulhe em programação