Entrar Ainda não tem acesso?
4
respostas

Alcool ou gasolina - com mais interação e buscndo valores do html

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

por Jeferson Magno Amorim Manini
| 38.9k xp | 16 posts
Cb Bombeiro

O código não funciona, já verifiquei e acredito que esteja tudo certo.


        <input id="gasolinaUsada" type="text">
        <button id="funcaoGasolina">Quantos quilomêtros foram percorridos?</button>


        var gasolinaUsada = document.getElementById("gasolinaUsada");

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


        function gasolina(){
            var capacidadeTanque = 40;
            var quilometrosPercorridos = gasolinaUsada.value / capacidadeTanque;
            mostra("foram consumidos " + quilometrosPercorridos + " por km")

        }

        var funcaoGasolina = document.getElementById("funcaoGasolina");
        button.onclick = gasolina;
4 respostas
por Jeferson Magno Amorim Manini
| 38.9k xp | 16 posts
Cb Bombeiro

Consequi, descobri o que está errado.

por Jeferson Magno Amorim Manini
| 38.9k xp | 16 posts
Cb Bombeiro

Bem, depois de avançar, entender algumas coisas outras não, voltei algumas aulas estou implementadno algumas funcionalidade a mais e treinando as coisas novas. Depois adiciono uma condicional para comparar os dois e ver qual dos dois é mais vantajoso já com os valores.

Uma coisa que está acontecendo como minha função mostra é que quando calculo o consum ele realiza mas aparece em outra página, queria que ela escreve na mesma páginal alguém poderia ajudar?

<h3>Alcool ou gasolina</h3>
    <p>A capacidade do tanque do automável a ser usado para a viagem é de 40 litros</p>


    <input id="gasolinaUsada" type="text">
    <button id="funcaoGasolina">Quantos quilomêtros foram percorridos?</button><br><br>


    <input id="alcoolUsado" type="text">
    <button id="funcaoAlcool">Quantos quilomêtros foram percorridos?</button>

    <script>

        var gasolinaUsada = document.getElementById("gasolinaUsada");

        var alcoolUsado = document.getElementById("alcoolUsado");


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


        function gasolina(){

            var capacidadeTanque = 40;
            var quilometrosPercorridos = gasolinaUsada.value / capacidadeTanque;
            mostra( "Foram pecorridos " + quilometrosPercorridos + " km")

            gasolinaUsada.value = "";
            gasolinaUsada.focus();
        }

        var funcaoGasolina = document.getElementById("funcaoGasolina");
        funcaoGasolina.onclick = gasolina;


        function alcool() {
            var capacidadeTanque = 40;
            var quilometrosPercorridos = alcoolUsado.value / capacidadeTanque;
            mostra( "Foram pecorridos " + quilometrosPercorridos + " km")

            alcoolUsado.value = "";
            alcoolUsado.focus();
        }

        var funcaoAlcool = document.getElementById("funcaoAlcool");
        funcaoAlcool.onclick = alcool;
    </script>
por Marcus Almeida
| 336.2k xp | 433 posts
Monitor | Scuba Team | Escola de Dados

Olá, Jeferson! Tudo bom?

Nesse caso, nós teríamos que primeiro estruturar o local onde nós iremos atualizar o valor do resultado tanto para o Álcool quanto para a Gasolina.

Então logo abaixo de cada botão, iremos criar uma tag <span> para o texto, utilizando os IDs resultadoGasolina e resultadoAlcool. Da seguinte maneira:

    <input id="gasolinaUsada" type="text">
    <button id="funcaoGasolina">Quantos quilomêtros foram percorridos com Gasolina?</button><br><br>
    <span id = "resultadoGasolina"></span>

    <br></br>
    <input id="alcoolUsado" type="text">
    <button id="funcaoAlcool">Quantos quilomêtros foram percorridos com Álcool?></button>
    <br></br>
    <span id = "resultadoAlcool"></span>

E dentro do nosso código, nós não iremos mais utilizar o document.write() para escrever as informações na página, pois dessa maneira ele continuaria abrindo novas páginas, que não é o que nós queremos. Nós iremos atualizar apenas o conteúdo das tags <span>.

Então nós trocamos a função mostra(...) por duas linhas de código: 

            var resultado = document.getElementById("resultadoGasolina"); // Encontra a caixa de texto da gasolina
            resultado.textContent = ("Foram pecorridos " + quilometrosPercorridos + " km")

Onde nós buscamos o valor da tag <span> e colocamos dentro de uma variável resultado, e então nós falamos que o conteúdo dessa tag agora vai ser a frase que nós montamos ("Foram percorridos...").

Então a estrutura para a gasolina é:

        function gasolina() {
            var capacidadeTanque = 40;
            var quilometrosPercorridos = gasolinaUsada.value / capacidadeTanque;

            var result = document.getElementById("resultadoGasolina"); // Encontra a caixa de texto da gasolina
            result.textContent = ("Foram pecorridos " + quilometrosPercorridos + " km")

            gasolinaUsada.value = "";
            gasolinaUsada.focus();
        }

E o código completo ficaria então:

<body>
    <h3>Alcool ou gasolina</h3>
    <p>A capacidade do tanque do automóvel a ser usado para a viagem é de 40 litros</p>

    <input id="gasolinaUsada" type="text">
    <button id="funcaoGasolina">Quantos quilomêtros foram percorridos com Gasolina?</button><br><br>
    <span id = "resultadoGasolina"></span>

    <br></br>
    <input id="alcoolUsado" type="text">
    <button id="funcaoAlcool">Quantos quilomêtros foram percorridos com Álcool?></button>
    <br></br>
    <span id = "resultadoAlcool"></span>

    <script>

        function gasolina() {
            var capacidadeTanque = 40;
            var quilometrosPercorridos = gasolinaUsada.value / capacidadeTanque;

            var resultado = document.getElementById("resultadoGasolina"); // Encontra a caixa de texto da gasolina
            resultado.textContent = ("Foram pecorridos " + quilometrosPercorridos + " km")

            gasolinaUsada.value = "";
            gasolinaUsada.focus();
        }

        function alcool() {
            var capacidadeTanque = 40;
            var quilometrosPercorridos = alcoolUsado.value / capacidadeTanque;

            var result = document.getElementById("resultadoAlcool"); // Encontra a caixa de texto do Álcool
            result.textContent = ("Foram pecorridos " + quilometrosPercorridos + " km")

            alcoolUsado.value = "";
            alcoolUsado.focus();
        }

        var gasolinaUsada = document.getElementById("gasolinaUsada");
        var alcoolUsado = document.getElementById("alcoolUsado");

        var funcaoGasolina = document.getElementById("funcaoGasolina");
        funcaoGasolina.onclick = gasolina;

        var funcaoAlcool = document.getElementById("funcaoAlcool");
        funcaoAlcool.onclick = alcool;

    </script>
</body>

Se ainda tiver alguma dúvida, estou por aqui. Ótimos estudos e grande abraço!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Jeferson Magno Amorim Manini
| 38.9k xp | 16 posts
Cb Bombeiro

Entendi, hoje estou trainando o que foi visto até a aula 8 de lógica I e vou fazer da idade mais interativo e vou postar, obrigado.