Dúvida Input e Button.

Olá josé, tudo bem com você?

Neste caso podemos criar elementos html com um identificador, por exemplo:

<input id="nome" />
<input id="senha" />

E em nosso javascript iremos capturar com uma função parecida com o querySelector que é o getElementById

<script>
    var inputNome = document.getElementById('nome');
    var inputSenha = document.getElementById('senha');
</script>

E dessa forma capturamos o input diferente para cada campo :)

Assim, conseguimos fazer validações, capturar o conteúdo da maneira como estamos habituados e da maneira como você fez na função!

Abraços e Bons Estudos =D

Olá Geovanni, tudo ótimo!. Fiz direitinho a captura para a variável com a função getElementById.

Contudo eu fiz um código para entrar com login e senha. Ele entra com o login e senha normal, entretanto, quanto se coloca o login e senha diferente, ele não para de repetir no alert .

Gostaria que aparecesse apenas uma vez caso o login ou senha esteja incorreto, e voltasse para que tentasse novamente, porém, não estou conseguindo.

fiz o código desta forma:

<meta charset="UTF-8">

Digite seu login:
<br>
<input id="nome"/>
<br>
Digite sua Senha:
<br>
<input id="senha"/>
<br>
<button>Entrar</button>


<script>

    function pulaLinha(){

        document.write("<br>");
        document.write("<br>");

    }

    function mostra(frase){

        document.write(frase);
        pulaLinha();

    }

    var loginCadastrado = "alura";
    var senhaCadastrada = "alura321";

    var inputNome = document.getElementById("nome");
    inputNome.focus();
    var inputSenha = document.getElementById("senha");


    function login(){

            var maximoTentativas = 3;

        for(var tentativaAtual = 1; tentativaAtual <= maximoTentativas; tentativaAtual++){

                if(inputNome.value == loginCadastrado && inputSenha.value == senhaCadastrada){
                mostra("Seja Bem-vindo(a) ao sistema " + inputNome.value + ".");
                break;

                } 
                else {
                    if(tentativaAtual == maximoTentativas){
                        alert("Número de tentativas ultrapassado." );
                    }
                    else {
                        alert("login ou senha inválido. Tente novamente.");
                    }
                }
            }


            inputNome.value = "";
            inputNome.focus();
            inputSenha.value = "";

    }

    var button = document.querySelector("button");
    button.onclick = login;

</script>

Opa José,

Como estamos trabalhando com um input e não um alert o ideal é que não tenha nenhum loop, veja:

O usuário digita algum campo errado, nesse mesmo momento seu código irá repetir novamente, sem dar tempo do usuário digitar algo, e continuará errado, até que a execução dos alerts tenham finalizado :)

Então na verdade queremos apenas executar o código:

<script>
    var loginCadastrado = "alura";
    var senhaCadastrada = "alura321";
    var maximoTentativas = 3;
    var tentativaAtual = 1;

    var inputNome = document.getElementById("nome");
    inputNome.focus();
    var inputSenha = document.getElementById("senha");


    function login(){
        if(inputNome.value == loginCadastrado && inputSenha.value == senhaCadastrada){
            mostra("Seja Bem-vindo(a) ao sistema " + inputNome.value + ".");
        } 
        else if(tentativaAtual == maximoTentativas){
            alert("Número de tentativas ultrapassado." );
            button.disabled = true;
        }
        else {
            alert("login ou senha inválido. Tente novamente.");
            tentativaAtual++;
        }
            inputNome.value = "";
            inputNome.focus();
            inputSenha.value = "";
    }
    var button = document.querySelector("button");
    button.onclick = login;
</script>
`

Aqui umas dicas:

Quando temos um else e depois um outro if, provavelmente podemos substituir por um else if com uma outra condição, dessa forma, se não bater a condição do if, é tentado com o else if e caso não funcione com nenhuma ai realmente vamos para o else, mas dessa forma o nosso código fica mais fácil de ser lido :)

Ali eu coloquei um button.disabled = true que é uma coisa que podemos fazer no javascriptque é bloquear um botão, dessa forma após as 3 tentativas teremos um efeito visual mais legal!

Conseguiu Compreender?

Abraços!

Perfeito Geovani, consegui captar bem, obrigado pelas instruções, soluções e dicas.