Tentei ir além, mas me trumbiquei... | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Oi!

Tentei fazer um form com input de volume total de tanque, tipo de combustível e total percorrido para cálculo do consumo. Mas acho que está faltando alguma função de evento e a sintaxe do querySelector é outro mistério que tenho dificuldade para dominar. Podem me ajudar?

<meta charset="UTF-8">

<h1>Calculadora de consumo:</h1>
<br>

<form>
    <label for="volume">Digite o volume total do tanque de combústivel:</label>
    <input type="number" id="volume" name="volume">

    <br>

    <p><strong>Qual combustível utilizado?</strong></p>
    <label for="gas"><input type="radio" id="gas" name="fuel" checked>Gasolina</label>
    <label for="alc"><input type="radio" id="alc" name="fuel" checked>Álcool</label>

    <br><br>

    <label for="distance">Digite o total da distância percorrida:</label>
    <input type="number" id="distance" name="distance">
</form>

<script>
    var tanque = document.querySelector('input[name=volume]');
    var combu = document.querySelector('input[name=fuel]');
    var totalDistance = document.querySelector('input[name=distance]');
    var consumo = totalDistance / tanque;

    document.write("O consumo de " + combu + " neste carro foi de " + consumo + " km/L.")

</script>

Olá Bernardo! Tudo bem com você?

Peço desculpa pela demora em responder a sua dúvida.

No seu código tem alguns pequenos problemas:

Não tem como no document.write() que você adicionou no fim calcular os valores que ainda não foram inseridos por isso aparece algumas mensagens diferentes.
Quando estamos trabalhando com cálculos onde pegamos os valores no HTML pelo input tem certas coisas que devem ser feitas para podermos trabalhar com os valores no Javascript.

E por conta disse eu fiz algumas alterações no seu código para demostrar uma forma de estar fazendo o que você queria.

<meta charset="UTF-8">

<h1>Calculadora de consumo:</h1>
<br>

<form onsubmit="calcular()">
    <label for="volume">Digite o volume total do tanque de combústivel:</label>
    <input type="number" id="volume" name="volume">

    <br>

    <p><strong>Qual combustível utilizado?</strong></p>
    <label for="gas"><input type="radio" id="gas" name="fuel" checked>Gasolina</label>
    <label for="alc"><input type="radio" id="alc" name="fuel" checked>Álcool</label>

    <br><br>

    <label for="distance">Digite o total da distância percorrida:</label>
    <input type="number" id="distance" name="distance">
    <button type="submit">Clique aqui para calcular</button>
</form>

<script>

    function calcular() {

        var tanque = document.getElementById("volume").value;

        var combu = document.getElementById("gas").value;

        var totalDistance = document.getElementById("distance").value;

        var opcao = document.querySelector('button');

        var consumo = parseInt(totalDistance) / parseInt(tanque);

        alert("O consumo de " + combu + " neste carro foi de " + consumo + " km/L." );  
    }

</script>

As alterações mais pontuas é adição de uma tag button , onde a partir do click desse botão vou estar passando as informações inseridas nos input’s e assim poderei trabalhar com elas na parte do Javascript, e além disso troquei a função document.write() por alert() para ficar melhor a visualização do resultado.

Se lhe restou dúvidas a respeito do código que eu lhe enviei eu vou estar a sua disposição para esclarece-lo.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado! ✓.