Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Não funcionou com outros exemplos.

Não conseguir pegar o valor digitado. Fiz igual ao video mas não deu certo. Achei muito corrida essa parte, preciso de ajuda.

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>Tabela Eventos</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <ul>
                <li class="titulos">Tabela Ganhos</li>
                <li class="meio">Login</li>
            </ul>

        </header>

        <div class="stroke">""</div>
        <main>

            <ul class="caixaSenha">
                <p class="textoSenha">Senha (Não tem segurança ainda!)</p>
                <form id="forma">
                    <label for="nomesobrenome"></label>  
                <input type="text" name="" id="nomesobrenome" class="inputpadrao" required placeholder="Sua senha.">

                <button id="botao" class="bto-principal">OK</button>

                </form>


            </ul>

        </main>
        <footer>

        </footer>
    <script src="tabela.js" ></script>
    </body>

JS

let titulo = document.querySelector(".meio");
//titulo.textContent = "lolou";

let botaoAdicionar = document.querySelector(".enviar");
botaoAdicionar.addEventListener("click", function(){
    event.preventDefault();

let digitado = document.querySelector(".caixaSenha");

console.log(digitado.nomesobrenome.value);
   //if()



   //titulo.textContent = "lolou";

});
2 respostas
solução!

Oi André, tudo bem?

Dentro do seu evento de clique, você usa o event.preventDefault(), porém você não está passando esse evento como parâmetro da função, então ele não é reconhecido, fazendo com que o browser dê um reload na página. Veja abaixo como deveria ficar:

botaoAdicionar.addEventListener("click", function(event) {
    event.preventDefault();
}

Além disso, o seu botão não possui uma classe enviar, ele apenas possui um id=botao e uma classe bto-principal. Você precisa utilizar mudar o nome da classe para enviar, já que está bto-principal. Ou, utilizar essa classe bto-principal dentro do querySelector(), em vez de enviar.

O último erro é quando você tenta pegar o valor do input nomesobrenome, para você tentar acessar esse valor, você precisa fazer um querySelector() no formulário, e não em uma ul, pois o input é referente ao formulário, então deveria ser algo do tipo:

let digitado = document.querySelector("form");

console.log(digitado.nomesobrenome.value);

Agora irá funcionar da maneira esperada. Espero ter ajudado, bons estudos =)

Funcionou!!!

Muito obrigado!