2
respostas

A lógica não esta correta. Podem me ajudar?

Melhorei o exercicios de condicionais, pedindo os dados do usuário. Porem quando eu coloco uma idade de 56 anos, por exemplo, ele da que a pessoa é menor de idade. Podem dar uma olhada no meu código, no geral, por favor? O botão de limpar também não esta funcionando. Obrigada

HTML

<!DOCTYPE html>

<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>Document</title>
</head>

<body>
    <div>
        <label>Digite sua idade:</label><br>
        <input type="text" id="txtIdade"/><br>
        <label>Você está acompanhada? Se sim, digite true. Se não, digite false.</label><br>
        <input type="text" id="txtAcompanhada"/><br>
        <button id="btnEnviar" onclick="vendaViagem()">Comprar viagem</button><br>
    </div>
    <div id="txtViagem1"></div><br>
    <div id="txtViagem2"></div><br>
    <div>
        <label>ja comprou sua passagem? Se sim, digite true. Se não, digite false.</label>
        <input type="text" id="txtPassagem"/><br>
        <button id="btnEnviar" onclick="confirmacaoEmbarque()">Confirme seu embarque</button><br>
    </div>
    <div id="txtEmbarque1">Embarque...</div><br>
    <div id="txtEmbarque2"></div><br>
    <button id="btnLimpar" onclick="limpar()">Limpar</button>
</body>
<script src="vendaViagem.js"></script>
</html>

JS

let estaAcompanhada = document.querySelector("#txtAcompanhada").value;
let temPassagem = document.querySelector("#txtPassagem").value;
let divViagem1 = document.querySelector("#txtViagem1");
let divViagem2 = document.querySelector("#txtViagem2");
let divEmbarque2 = document.querySelector("#txtEmbarque2");
let listaDeDestinos = new Array(
    "São Paulo",
    "Rio de Janeiro",
    "Curitiba",
    "Salvador",
    "Rio Grande do Sul"
);

function vendaViagem() {
    if (idadeComprador >= 18 || estaAcompanhada == true) {
        divViagem1.innerHTML = "Boa Viagem!";
        listaDeDestinos.splice(2, 1); //removendo item
        divViagem2.innerHTML = `O destino comprado foi ${listaDeDestinos[2]}. Restando os seguintes destinos: ${listaDeDestinos}}`;
    } else {
        divViagem1.innerHTML = "Você é menor de idade e esta desacompanhada. Não pode comprar um pacote de viagens.";
    }
}

function confirmacaoEmbarque() {
    if (idadeComprador >= 18 && temPassagemComprada) {
        divEmbarque2.innerHTML = "Boa viagem";
    } else {
        divEmbarque2.innerHTML = "Você não pode embarcar";
    }
}

function limpar() {
    idadeComprador.value = "";
    estaAcompanhada.value = "";
    temPassagem.value = "";
    divViagem1.value = "";
    divViagem2.value = "";
    divEmbarque2.value = "";
}

Obrigada

2 respostas

Olá Andressa, tudo bem?

Alguns pontos precisam ser analisados para entendermos o que esta fazendo com que o código não funcione. Vamos lá!

1º Parte

Declaração da variável


No código que foi enviado aqui no fórum, a variável let idadeComprador não está declarada e esse foi o primeiro erro a se manifestar.

Modificando, declarei a variável no início do código:

let idadeComprador = document.querySelector("#txtIdade");

2º Parte

Modificando o nome da variável


Uma das variáveis foi declarada com o nome let temPassagem e na function confirmacaoEmbarque, ela é setada com o nome temPassagemComprada, o resultado disso foi um erro dizendo que essa variável não está definida.

Alterando, declarei a variável modificando o nome para let temPassagemComprada:

let temPassagemComprada = document.querySelector("#txtPassagem");

3º Parte

Retirando os values do escopo global


Todas as variáveis foram declaradas já pegando os values dos campos dos inputs. Entretando, isso gera um problema, visto que essa coleta é feita no momento em que a página carrega, ou seja, os valores ainda estão vazios e as funções precisam pegar esses valores somente no momento do click no botão, quando os inputs já estão preenchidos.

Dessa forma, as funções vendaViagem() e confirmacaoEmbarque() estavam realizando as suas instruções com os valores vazios e isso gerou a falta de validação da maior idade, gerando o erro que você mencionou.

Para resolvermos essa questão, temos que declarar as variáveis sem o value e setar esse valor somente nas funções.

Modificando, ficará assim:

  • Retirada dos.value nas declarações
let idadeComprador = document.querySelector("#txtIdade")
let estaAcompanhada = document.querySelector("#txtAcompanhada");
let temPassagemComprada = document.querySelector("#txtPassagem");
let divViagem1 = document.querySelector("#txtViagem1");
let divViagem2 = document.querySelector("#txtViagem2");
let divEmbarque2 = document.querySelector("#txtEmbarque2");
  • Colocação dos .value nas funções
function vendaViagem() {
    console.log(idadeComprador.value, estaAcompanhada.value)
    console.log(idadeComprador.value >= 18)
    console.log(estaAcompanhada.value == true)
    if (idadeComprador.value >= 18 || estaAcompanhada.value == "true") {
        divViagem1.innerHTML = "Boa Viagem!";
        listaDeDestinos.splice(2, 1); //removendo item
        divViagem2.innerHTML = "O destino comprado foi ${listaDeDestinos[2]}. Restando os seguintes destinos: ${listaDeDestinos}}";
    } else {
        divViagem1.innerHTML = "Você é menor de idade e esta desacompanhada. Não pode comprar um pacote de viagens.";
    }
}
function confirmacaoEmbarque() {
    if (idadeComprador.value >= 18 && temPassagemComprada.value) {
        divEmbarque2.innerHTML = "Boa viagem";
    } else {
        divEmbarque2.innerHTML = "Você não pode embarcar";
    }
}

4º Parte

true == "true" → false"


Outro ponto estava fazendo com que o comprador menor de idade que estava acompanhado não estivesse apto para viajar. Isso ocorreu pois no ifda function vendaViagem() o valor que está sendo comparado com o valor do input é um boolean e o valor do input é uma string e neste caso sempre dará false e a consequência disso é não validar o true que o usuário escreveu. Veja no esquema do exemplo abaixo:

// inputs do usuário:
// idadeComprador = 17
// estaAcompanhada = true

    if (idadeComprador.value >= 18 || estaAcompanhada.value == true)
                (17 >= 18  ||  "true" == true)
                    (false || false)

Podemos corrigir essa questão modificando noif o true boolean para uma string, dessa forma:

function vendaViagem() {
    console.log(idadeComprador.value, estaAcompanhada.value)
    console.log(idadeComprador.value >= 18)
    console.log(estaAcompanhada.value == true)
    if (idadeComprador.value >= 18 || estaAcompanhada.value == "true") // alteração do true {
        divViagem1.innerHTML = "Boa Viagem!";
        listaDeDestinos.splice(2, 1); //removendo item
        divViagem2.innerHTML = "O destino comprado foi ${listaDeDestinos[2]}. Restando os seguintes destinos: ${listaDeDestinos}}";
    } else {
        divViagem1.innerHTML = "Você é menor de idade e esta desacompanhada. Não pode comprar um pacote de viagens.";
    }
}

5º Parte

Alterando as condicionais


A function confirmacaoEmbarque() estava descrita de uma forma que o usuário que fosse menor de idade, estivesse acompanhado não poderia embarcar e também não estava associando o valor do temPassagemComprada como true para que fosse disparada a mensagem de Boa viagem. Veja:

function confirmacaoEmbarque() {
    if (idadeComprador.value >= 18 && temPassagemComprada.value) {
        divEmbarque2.innerHTML = "Boa viagem";
    } else {
        divEmbarque2.innerHTML = "Você não pode embarcar";
    }
}

Modificando para que possa ser possível viajar, ficará assim:

function confirmacaoEmbarque() {
    if ((idadeComprador.value >= 18 || estaAcompanhada.value == "true") && temPassagemComprada.value == "true") {
        divEmbarque2.innerHTML = "Boa viagem";
    } else {
        divEmbarque2.innerHTML = "Você não pode embarcar";
    }
}
  • O código completo ficou assim:
let idadeComprador = document.querySelector("#txtIdade") 
let estaAcompanhada = document.querySelector("#txtAcompanhada");
let temPassagemComprada = document.querySelector("#txtPassagem");
let divViagem1 = document.querySelector("#txtViagem1");
let divViagem2 = document.querySelector("#txtViagem2");
let divEmbarque2 = document.querySelector("#txtEmbarque2");
let listaDeDestinos = new Array(
    "São Paulo",
    "Rio de Janeiro",
    "Curitiba",
    "Salvador",
    "Rio Grande do Sul"
);


function vendaViagem() {
    console.log(idadeComprador.value, estaAcompanhada.value)
    console.log(idadeComprador.value >= 18)
    console.log(estaAcompanhada.value == true)
    if (idadeComprador.value >= 18 || estaAcompanhada.value == "true") {
        divViagem1.innerHTML = "Boa Viagem!";
        listaDeDestinos.splice(2, 1); //removendo item
        divViagem2.innerHTML = "O destino comprado foi ${listaDeDestinos[2]}. Restando os seguintes destinos: ${listaDeDestinos}}";
    } else {
        divViagem1.innerHTML = "Você é menor de idade e esta desacompanhada. Não pode comprar um pacote de viagens.";
    }
}

function confirmacaoEmbarque() {
    if ((idadeComprador.value >= 18 || estaAcompanhada.value == "true") && temPassagemComprada.value == "true") {
        divEmbarque2.innerHTML = "Boa viagem";
    } else {
        divEmbarque2.innerHTML = "Você não pode embarcar";
    }
}

function limpar() {
    idadeComprador.value = "";
    estaAcompanhada.value = "";
    temPassagem.value = "";
    divViagem1.value = "";
    divViagem2.value = "";
    divEmbarque2.value = "";
}

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!