0

Olá!

Quero fazer um aplicativo em quero fazer uma função em que o usuário escolha o tipo de Uber que ele vai pegar, marcando uma CheckBox com o tipo do Uber (Uber X, Select e Black). Para isso quero usar um Switch Case ao invés de IFs. Fiz um código aonde a minha ideia era fazer um array e a posição do array ser a escolha do case. Mas quando imprimo no console, a variável tipoEscolhido é dada como undefined.

. Como posso fazer para pegar apenas o valor do array que esteja checado?

Obrigado.

Seguem os códigos:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Uber</title>

    <link rel="stylesheet" href="../08-uberMod/estilo.css">
    <script src="../08-uberMod/executar.js"></script>


</head>

<body>

    
    <h1>Uber</h1>

    <p>Tipo de Uber</p>


<section class="alinhaBox">
        <input  class="uber" type="checkbox" name="uber" id="uberX"> Uber X </input>
        <input  class="uber" type="checkbox" name="uber" id="uberSelect"> Uber Select </input>
        <input  class="uber" type="checkbox" name="uber" id="uberBlack"> Uber Black </input>
 </section>

        <br>

        <p>Local de Saída:</p>
            <input type="text" name="localSaida" id="localSaida">
        <p>Local de Destino:</p>
            <input type="text" name="localDestino" id="localDestino">

        <br>

        <p>Forma de Pagamento:</p>
                <input type="checkbox" name="cartao" id="cartao">Cartão de Crédito</input>
                <input type="checkbox" name="dinheiro" id="dinheiro">Dinheiro</input>

        <br>

        <br>

        <button onclick="executar()">Pedir Uber</button>
</body>
</html>

function executar(){

    let uberX = document.getElementById("uberX").value;
    let uberSelect = document.getElementById("uberSelect").value;
    let uberBlack = document.getElementById("uberBlack").value;

    let tipoUber  = [uberX, uberSelect, uberBlack]

    let tipoEscolhido 

    switch (tipoUber.checked){

        case 0:
           tipoEscolhido = "Uber X"
            break;
        case 1: 
            tipoEscolhido = "Uber Select"
            break;
        case 2: 
            tipoEscolhido = "Uber Black"
            break;

    }

    console.log(tipoEscolhido)

}

1
  • 2
    Se o usuário só pode escolher um tipo de opção, deveria usar radiobutton e não checkbox.
    – Sam
    Commented 14/01/2020 às 14:01

2 Respostas 2

0

Segue a resolução do seu problema.

substitui o document.getElementById().value por document.getElementById("uberX").checked dessa forma se o CheckBox estiver marcado o retorno sera true se não o retorno sera false, depois adicionei a função indexOf(), passando true como parâmetro, assim a função vai me retornar a posição que o valor true foi encontrado na matriz, se ela não encontrar o valor true , o retorno sera -1.

    function executar() {

        let uberX = document.getElementById("uberX").checked;
        let uberSelect = document.getElementById("uberSelect").checked;
        let uberBlack = document.getElementById("uberBlack").checked;
        let tipoUber = [uberX,uberSelect,uberBlack].indexOf(true)
        let tipoEscolhido
        switch (tipoUber) {
            case -1:
                tipoEscolhido = "Tipo de uber não informado"
                break;
            case 0:
                tipoEscolhido = "Uber X"
                break;
            case 1:
                tipoEscolhido = "Uber Select"
                break;
            case 2:
                tipoEscolhido = "Uber Black"
                break;
        }

        alert(tipoEscolhido)

    }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Uber</title>



</head>

<body>


    <h1>Uber</h1>

    <p>Tipo de Uber</p>


    <section class="alinhaBox">
        <input class="uber" type="checkbox" name="uber" id="uberX"> Uber X </input>
        <input class="uber" type="checkbox" name="uber" id="uberSelect"> Uber Select </input>
        <input class="uber" type="checkbox" name="uber" id="uberBlack"> Uber Black </input>
    </section>

    <br>

    <p>Local de Saída:</p>
    <input type="text" name="localSaida" id="localSaida">
    <p>Local de Destino:</p>
    <input type="text" name="localDestino" id="localDestino">

    <br>

    <p>Forma de Pagamento:</p>
    <input type="checkbox" name="cartao" id="cartao">Cartão de Crédito</input>
    <input type="checkbox" name="dinheiro" id="dinheiro">Dinheiro</input>

    <br>

    <br>

    <button onclick="executar()">Pedir Uber</button>
</body>

</html>

1
  • 1
    Obrigado! Funcionou perfeitamente!
    – user172788
    Commented 14/01/2020 às 14:02
-2

Outra opção seria pesquisar por exemplo a class uber retornar o selecionado.

Considere usar um radio em vez da checkbox.

function executar() {

    const nodelist = document.querySelectorAll('.uber');

    const checked = Array.from(nodelist).find(el => el.checked);

    if (checked) console.log(checked.value);
    else console.log('nada selecionado');
}
    <section class="alinhaBox">
        <input class="uber" type="checkbox" name="uber" value="Uber X" id="uberX"> Uber X
        <input class="uber" type="checkbox" name="uber" value="Uber Select" id="uberSelect"> Uber Select
        <input class="uber" type="checkbox" name="uber" value="Uber Black" id="uberBlack"> Uber Black
    </section>


    <button onclick="executar()">Pedir Uber</button>

Você deve fazer log-in para responder a esta pergunta.