Entrar Ainda não tem acesso?
2
respostas

Meu "document.querySelector("input")" não mostra nenhuma caixa na hora de rodar o código. O que houve?

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação, no capítulo Interaja de maneira diferente com o usuário e atividade Campo de texto e botão

por Isaac Figueiredo da Silva
| 100.2k xp | 1 posts
<script>

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

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

function resultado1() {
    document.write("CANCELAMENTO CONCLUÍDO! A faculdade confirmou a devolução de " + qtdMens + " mensalidade(s) do semestre de " + semestre + " e o(s) boleto(s) referente(s) ao período de " + boletosA + " a " + boletosB + " foi(am) cancelado(s). O formulário para reembolso de R$" + valorReembolso + " foi enviado para o seu e-mail e, após recebimento no PRAVALER, o ressarcimento é feito em até 10 dias úteis.")
}

function resultado2() {
    document.write("CANCELAMENTO CONCLUÍDO! A faculdade confirmou a devolução de " + qtdMens + " mensalidade(s) do semestre de " + semestre + " e o(s) boleto(s) referente(s) ao período de " + boletosA + " a " + boletosB + " foi(am) cancelado(s). Caso haja mais boletos, por serem referentes às demais mensalidades ou outros semestres contratados, eles permanecem ativos para pagamento.")
}

function resultado3() {
    document.write("CANCELAMENTO CONCLUÍDO! A faculdade confirmou o cancelamento de " + qtdMens + " mensalidade(s) do semestre de " + semestre + " e o(s) boleto(s) referente(s) ao período de " + boletosA + " a " + boletosB + " foi(am) cancelado(s). Caso haja mais boletos, por serem referentes às demais mensalidades ou outros semestres contratados, eles permanecem ativos para pagamento.")
}    

    var antecipacao = 1;
    var gcc = 2;

    mostra("O aluno é: <br> 1. Antecipação; <br> 2. Gestão/Complementar/Compartilhado <br>");
    var modalidade = document.querySelector("input");

    if (modalidade == antecipacao) {
        mostra("Aluno possui direito a reembolso? <br> 1. Sim <br> 2. Não <br>");
        var reembolso = document.querySelectorAll("input");
        if (reembolso == 1) {
            mostra("Insira o valor do reembolso do aluno (R$) <br>");
            var valorReembolso = document.querySelector("input");
            pulaLinha();
            mostra("Quantas mensalidades serão canceladas? <br>");
            var qtdMens = document.querySelector("input");
            pulaLinha();
            mostra("Qual semestre está sendo cancelado? <br>");
            var semestre = document.querySelector("input");
            pulaLinha();
            mostra("Os boletos cancelados vão de ... a ...");
            var boletosA = document.querySelector("input");
            pulaLinha();
            var boletosB = document.querySelector("input");


            var button1 = document.querySelector("button");
            button1.onclick = resultado1;    
        }
        else {
            mostra("Quantas mensalidades serão canceladas? <br>");
            var qtdMens = document.querySelector("input");
            pulaLinha();
            mostra("Qual semestre está sendo cancelado? <br>");
            var semestre = document.querySelector("input");
            pulaLinha();
            mostra("Os boletos cancelados vão de ... a ...");
            var boletosA = document.querySelector("input");
            pulaLinha();
            var boletosB = document.querySelector("input");

            var button2 = document.querySelector("button");
            button2.onclick = resultado2;
        }
    }

    else {
        if (modalidade == gcc) {
            mostra("Quantas mensalidades serão canceladas? <br>");
            var qtdMens = document.querySelector("input");
            pulaLinha();
            mostra("Qual semestre está sendo cancelado? <br>");
            var semestre = document.querySelector("input");
            pulaLinha();
            mostra("Os boletos cancelados vão de ... a ...");
            var boletosA = document.querySelector("input");
            pulaLinha();
            var boletosB = document.querySelector("input");

            var button3 = document.querySelector("button");
            button3.onclick = resultado3;
        }
    }


</script>
2 respostas
por CAUÊ MENDES RODRIGUES ALVES
| 248.2k xp | 175 posts
Entusiasta da Programação / Estudante

Olá Isaac, ao capturar o valor do input, você está na verdade capturando a TAG htnl, ou seja a TAG <input></input>, e para descobrir o que essa TAG contém como valor, você precisa apenas ao chamar a função usar o sufixo .textContent, que irá capturar o valor de texto inserido no input, seu código ficaria assim:

var qtdMens = document.querySelector('input');
console.log(qtdMends.textContent);

Agora você pode aplicar isso em todo seu código e conseguir capturar o valor do input, se te ajudei marque o tópico como solucionado :-D

por Luiz Gustavo Andrade dos Santos
| 219.4k xp | 158 posts

document.querySelector("input"); não cria um input pra você, apenas seleciona um que já tenha sido criado. Tentei criar um juntamente com um botão mas eu não consegui acessar o valor. Você vai ter que montar um html ou então utilizar o prompt assim:

Ao invés de

    mostra("O aluno é: <br> 1. Antecipação; <br> 2. Gestão/Complementar/Compartilhado <br>");
    var modalidade = document.querySelector("input");

Usar

var modalidade = prompt("O aluno é: \n 1. Antecipação; \n 2. Gestão/Complementar/Compartilhado");

Esboço versão html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <div>
        Modalidade
        <br>
        <input type="radio" id="antecipacao" name="modalidade" value="1" checked="checked">
        <label for="antecipacao">Antecipação</label>
        <br>
        <input type="radio" id="gcc" name="modalidade" value="2">
        <label for="gcc">Gestão/Complementar/Compartilhado</label>
    </div>
    <label>Insira o valor do reembolso do aluno (R$)</label>
    <input id="reembolso">
    <br>
    <button id="cancelamento">Cancelamento</button>
</head>

<body>
<script>
    var button = document.querySelector('#cancelamento');
    button.onclick = function() {
        var modalidade = document.querySelector('input[name="modalidade"]:checked').value;
        var valorReembolso = document.querySelector('#reembolso').value;
        document.write(modalidade + " " + valorReembolso)
    };
</script>
</body>
</html>