Javascript If de senha não funciona

Matheus Evandro Rech · 22 de outubro de 2018

Ola estou aprendendo html criando um site simples.

Queria criar um tipo de cadastro que no próprio código eu coloco o login e a senha só pra testar,

então criei isto:

HTML:

 <div class="tlogin">
          <div class="tabela">
            <ul class="unlinha">
              <li class="linha"><a class="linha1" href="loja.html">Loja</a></li>

              <li class="linha"><a class="linha1" href="form.html">Ofertas</a></li>

              <li class="linha"><a class="linha1" href="prudutos.html">Produtos</a></li>
            </div>
          <div class="login">
            <form>
              <a style="font-family:Oswald;">Login:</a>
              <input type="text" id="login" class="caixalogin">

              <a style="font-family:Oswald;">Senha:</a>
              <input type="password" id="senha" class="caixalogin">
              <input type="submit" onClick="testesenha()" Value="Entrar"
            </form>
        </div>
      </div>
      <a id="kkk">tente</a>

CSS:

.tlogin {
          width: 100%;
          height: 50px;
          float: left;
          color: white;
          background: #00a3cc;
          font-family: Oswald;
        }
.tabela {
          width: 57.5%;
          float: left;
          color: white;
          background: #00a3cc;
          font-family: Oswald;
        }
.unlinha {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: #00a3cc;
       }
.linha {
          float: left;
        }

.linha1 {
          display: block;
          color: white;
          padding: 16px;
          padding-top: 8px;
          padding-right: 30px;
          padding-bottom: 8px;
          padding-left: 30px;
          font-family: Oswald;
          font-size: 17px;
        }
.login {
          width: 42.5%;
          height: 50px;
          float: right;
          color: white;
          background: #00a3cc;
          font-family: Oswald;
        }
.caixalogin {
          color: black;
          font-family: Oswald;
        }

JAVA SCRIPT:

function testesenha(){
          var login1 = document.getElementById("login");
          var senha1 = document.getElementById("senha");

          if (login1 == "teste" && senha1 == "teste"){
            document.getElementById("kkk").innerHTML="certo";
          }else{
            document.getElementById("kkk").innerHTML="erro";
          }
        }

mais quando eu coloco o login teste e a senha teste ele da o texto erro no id kkk que eu coloquei caso a senha esteja errada

alguém sabe o erro ?

makotsunami · 22 de outubro de 2018

Quando você faz document.getElementById você está selecionando o elemento HTML da sua página.

Então quando você compara login1 com senha, você está companhando:

ISSO:

<input type="text" id="login" class="caixalogin">

COM ISSO

<input type="password" id="senha" class="caixalogin">

Que são duas coisas bem diferentes. Para compara, você precisa pegar o valor desses campos, ou seja:

if (login1.value == "teste" && senha1.value == "teste"){

    document.getElementById("kkk").innerHTML="certo";

}

Adriano_web · 22 de outubro de 2018

Use a propriedade value do objeto 'input' JavaScript, você não usou ela.

if (login1.value == "teste" && senha1.value == "teste"){
	document.getElementById("kkk").innerHTML = "certo";
}else{
	document.getElementById("kkk").innerHTML = "erro";
}

Matheus Evandro Rech · 22 de outubro de 2018

@makotsunami muito obrigado, e mais você acha que eu deveria deixar o login e a senha dentro do <form> ? porque quando eu envio ele atualiza a pagina

adicionado 0 minutos depois

@Adriano_web obrigado também !

adicionado 0 minutos depois

@Adriano_web você acha que eu deveria deixar o login e a senha dentro do <form> ? porque quando eu envio ele atualiza a pagina

DiF · 22 de outubro de 2018

@Matheus Evandro Rech Olá,

Você percebe que isso é ineficiente certo? É só para fins de aprendizado. Pois jamais ninguém usaria um sistema de login assim. Exige uma linguagem de programação server-side como o PHP e um banco de dados.

De qualquer forma se for apenas para aprendizado, crie duas variáveis com o seu "login" e "senha" no javascript.

Depois compare o valor digitado nos campos com o valor destas variáveis.

42 minutos atrás, Matheus Evandro Rech disse:

você acha que eu deveria deixar o login e a senha dentro do <form> ? porque quando eu envio ele atualiza a pagina

Isso acontece porque você não está usando algo que mantenha persistente... por exemplo cookies, sessions(no php) etc..

Adriano_web · 22 de outubro de 2018

Use o método preventDefault() do objeto event, assim ele para o padrão do envio e a tela não atualizará.

Primeiro declare a função e use o parâmetro para referenciar o objeto event

function testesenha(e)

depois, na primeira linha do bloco você chama o método

e.preventDefault()

Por fim, use-o no atributo de evento com o argumento chamando o objeto event

onclick="testesenha(event)"

Matheus Evandro Rech · 23 de outubro de 2018

Ola galera, eu gostaria de saber como eu abro um arquivo .txt e leio cada linha dele e armazeno numa var, se possível só com JS já vi outros tópicos mais usava xml (que eu nao tenho conhecimento algum), eu sei um pouco de php só que estou programando num site e ele não suporta html e php juntos. Alguém pode ajudar ?

Adriano_web · 23 de outubro de 2018

No caso você teria que usar JavaScript assíncrono, ou mais diretamente, você teria que utilizar o AJAX para tal procedimento.

Primeiramente chame o arquivo .txt que você irá pegar.

<script>
  window.onload = function() {
    var xhttp = new XMLHttpRequest();
    var arqTxt = "";
      
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        arqTxt += this.responseText;  // Aqui esta o conteúdo do arquivo .txt
      }
    };
      
    xhttp.open("GET", "arquivo.txt", true);  // Segundo parâmetro é o arquivo que você irá obter.
    xhttp.send();
  }
</script>

Agora você tem o conteúdo do arquivo .txt armazenado em uma variável chamada arqTxt.

Matheus Evandro Rech · 23 de outubro de 2018

@Adriano_web você poderia me explicar linha por linha, porque eu quero 3 variáveis que vão armazenar o que esta escrito no bloco de notas, são três linhas, exemplo:

teste<linha1>

teste<linha2>

teste<linha3>

esse é o bloco de notas e no codigo quero que fique assim:

var qualquercoisa1 = linha1

var qualquercoisa2 = linha2

var qualquercoisa3 = linha3

se possível me explicar pra na próxima vez eu mesmo fazer

Adriano_web · 23 de outubro de 2018

window.onload = function() {
  var xhttp = new XMLHttpRequest();
  var arqTxt = "";

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      arqTxt += this.responseText;  // Aqui esta o conteúdo do arquivo .txt
    }
  };

  xhttp.open("GET", "arquivo.txt", true);  // Segundo parâmetro é o arquivo que você irá obter.
  xhttp.send();
}

A primeira linha cria uma instância do objeto XMLHttpRequest que nada mais é que o AJAX.
Cria uma variável para armazenar futuramente o conteúdo do arquivo de texto.
Depois chamei a propriedade 'onreadystatechange' que vai obter informações do arquivo.
A condição 'if' verifica se o arquivo está pronto para uso, se sim ele armazenará informações do arquivo.
O método open chama um arquivo chamado 'arquivo.txt', método de envio da resposta é GET e o uso da tecnologia assíncrona é marcada como 'true'.
O método send envia uma resposta para o servidor no caso ftp e obtém o arquivo.

No seu arquivo txt você poderia criar marcação assim:

<p>TESTE1</p>
<p>TESTE2</p>
<p>TESTE3</p>
<p>TESTE4</p>

E no JavaScript você poderia utilizar o método slice do objeto String para extrarir partes das linhas

arqTxt += this.responseText;
var linha1, linha2, linha3;
linha1 = arqTxt.slice(0, 11);
linha2 = arqTxt.slice(13, 24);
linha3 = arqTxt.slice(24, 39);

Aqui um exemplo completo:

window.onload = function() {
  var linha1, linha2, linha3;
  var xhttp = new XMLHttpRequest();
  var arqTxt = "";

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      arqTxt += this.responseText;  // Aqui esta o conteúdo do arquivo .txt
      var linha1, linha2, linha3;
      linha1 = arqTxt.slice(0, 11);
      linha2 = arqTxt.slice(13, 24);
      linha3 = arqTxt.slice(24, 39);
    }
  };

  xhttp.open("GET", "arquivo.html", true);  // Segundo parâmetro é o arquivo que você irá obter.
  xhttp.send();                             // Nesse caso o arquivo é .html
}

adicionado 27 minutos depois

@Matheus Evandro Rech Fiz uma resposta mais eu me corrigi quanto ao erro. Então, você pode usar o método slice do objeto String para extrair partes de uma linha como mostrado nos exemplos acima.

adicionado 44 minutos depois

@Matheus Evandro Rech Uma outra forma ainda mais rápida e eficas é utilizar RegExp ao invés do método slice.

var linha1, linha2, linha3;
linha1 = /Linha1/.exec(arqTxt);
linha2 = /Linha2/.exec(arqTxt);
linha3 = /Linha3/.exec(arqTxt);

// Entre as barras vai o texto que está na primeira linha do arquivo txt.

makotsunami · 23 de outubro de 2018

Você pode utilizar JavaScript moderno para economizar linhas. Esse código faz basicamente a mesma coisa que o código postado acima. Provavelmente não vai funcionar no Internet Explorer por ele ser um navegador antigo.

fetch('file.txt') //Caminho do seu arquivo
    .then(response => response.text())
	.then(text => {
	//O parâmetro text tem todo o conteúdo do seu arquivo txt, faça o q quiser com ele
		console.log(text);
	})
	.catch(error => console.log(`Erro ao ler o arquivo: ${error}`));

Matheus Evandro Rech · 23 de outubro de 2018

@Adriano_webcomo eu ativo essa function ?

adicionado 8 minutos depois

@makotsunami Deu o seguinte erro no debbuger: SyntaxError: Unexpected token }

Adriano_web · 23 de outubro de 2018

@Matheus Evandro Rech Qual função está dizendo? está falando a que está na propriedade onload? Se for, ela é chamada automaticamente quando a página termina o carregamento.

Matheus Evandro Rech · 23 de outubro de 2018

@Adriano_web é que assim eu to testando um sistema de login bem simples pra editar as imagens de um site

e o nome do arquivo de testo vai ser o login dai ele vai pesquisar quando o usuário digitar o botão enviar de um formulário e eu queria que busca-se numa certa pasta vou mandar o link do trabalho pra você entender melhor se você nao entender me pergunte

https://repl.it/@MatheusEvandro/loja

Adriano_web · 23 de outubro de 2018

@Matheus Evandro Rech Tá dando o erro de sintaxe porque no final colocou um } que a mais, delete-o.

Para pegar os valores do campo você tem que usar a propriedade 'value'. Tenta utilizar um dos códigos para ver qual te agrega mais.

var login1 = document.getElementById("login").value;
var senha1 = document.getElementById("senha").value;

Matheus Evandro Rech · 26 de outubro de 2018

o código no JavaScript Ficou assim no final:

<script>
        function testesenha(){
          var loginsite = document.getElementById("login");
          var senhasite = document.getElementById("senha");
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
           if (this.readyState == 4 && this.status == 200) {
            var objJson = JSON.parse(this.responseText); 
            var loginJson1, loginJson2, loginJson3, senha, name;
            loginJson1 = objJson.logins.login1.login;
            loginJson2 = objJson.logins.login2.login;
            loginJson3 = objJson.logins.login3.login;

           if (loginsite.value != loginJson1 || loginJson2 || loginJson3) {
                  document.getElementById("imglogin").src = "imagens/erro.png";
                  document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
                }

            if (loginsite.value == loginJson1 || loginJson2 || loginJson3){
              if(loginsite.value == loginJson1){
                senha = objJson.logins.login1.senha;
                name = objJson.logins.login1.nome;
                if(senhasite.value == senha){
                  document.getElementById("imglogin").src = "imagens/login.png";
                  document.getElementById("txtlog").innerHTML = "Ola " + name;
                } else {
                  document.getElementById("imglogin").src = "imagens/erro.png";
                  document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
                }
              }
              if(loginsite.value == loginJson2){
                senha = objJson.logins.login2.senha;
                name = objJson.logins.login2.nome;
                if(senhasite.value == senha){
                  document.getElementById("imglogin").src = "imagens/login.png";
                  document.getElementById("txtlog").innerHTML = "Ola " + name;
                } else {
                  document.getElementById("imglogin").src = "imagens/erro.png";
                  document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
                }
              }
              if(loginsite.value == loginJson3){
                senha = objJson.logins.login3.senha;
                name = objJson.logins.login3.nome;
                if(senhasite.value == senha){
                  document.getElementById("imglogin").src = "imagens/login.png";
                  document.getElementById("txtlog").innerHTML = "Ola " + name;
                } else {
                  document.getElementById("imglogin").src = "imagens/erro.png";
                  document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
                }
              }
            } 
           };
          }
          xhttp.open("GET", "teste.json", true); 
          xhttp.send();
        }
      </script>

explicando mais ou menos como ficou:

primeiro criamos um arquivo teste.json que é aonde estão os dados do login

{
  "logins" : {
    "login1" : {"login" : "teste1", "senha" : "teste1", "nome" : "Matheus1"},
    "login2" : {"login" : "teste2", "senha" : "teste2", "nome" : "Matheus2"},
    "login3" : {"login" : "teste3", "senha" : "teste3", "nome" : "Matheus3"}
  }
}

Bem criamos uma array com o nome logins, depois criamos outras 3 arrays uma com os nomes: "login1" "login2" "login3" essas variáveis você pode mudar o nome como quiser sendo que altere o nome no Java Script. Dentro de cada inserimos valores a variáveis conforme a Sintaxe do JSON, que são: login, senha e nome(que tambem podem ser alterados os seus nomes se alterado no JavaSript) e em cada uma colocamos um valor para ser comparado com o que o usuário digita no input do HTML

Indo para o Java script temos o primeiro bloco:

function testesenha(){
          var loginsite = document.getElementById("login");//recebe os dados do input de login no HTML
          var senhasite = document.getElementById("senha");//recebe os dados do input de senha no HTML
          var xhttp = new XMLHttpRequest();//armazena os dados recebidos do XMLHttpRequest 
          xhttp.onreadystatechange = function() {//função para quando receber os dados do XMLHttpRequest
           if (this.readyState == 4 && this.status == 200) {
            var objJson = JSON.parse(this.responseText);  // Aqui esta o conteúdo do arquivo JSON dentro da variavel objJson
            var loginJson1, loginJson2, loginJson3, senha, name;//criamos as variaveis para armazenar os dados do arquivo Json
            loginJson1 = objJson.logins.login1.login;//armazena o login da array login1
            loginJson2 = objJson.logins.login2.login;//armazena o login da array login2
            loginJson3 = objJson.logins.login3.login;//armazena o login da array login3

(coloquei explicado linha por linha no bloco)

Como citei no arquivo JSON que você poderia alterar o nome das variáveis do JSON se altera-se no JavaScript então é aqui que você altera:

loginJson1 = objJson.logins.login1.login;//logins é a primeira array depois tem a array login1 e em seguida 
loginJson2 = objJson.logins.login2.login;//a variavel login que foi "traduzida para o JavaScript"
loginJson3 = objJson.logins.login3.login;//objJson é a variavel que esta com os dados do JSON
										 //logins é a primeira array que expliquei no arquivo .json
										 //login1 ou login2 ou login3 são as array que tem os dados do login senha e nome
										 //login e a variavel que tem o dado do login

Vamos para o segundo bloco do JavaScript(OBS: Eu criei uma serie e if para analisar se os dados estão corretos a outros modos mais EU optei por esse) :

if (loginsite.value != loginJson1 || loginJson2 || loginJson3) {
                  document.getElementById("imglogin").src = "imagens/erro.png";
                  document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
                }

Explicando:

if (loginsite.value != loginJson1 || loginJson2 || loginJson3) {

esse if verifica se a o login que o usuário inseriu é diferente de algum dos logins que estão no arquivo Json

document.getElementById("imglogin").src = "imagens/erro.png";
document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";

E se a condição do if for True(Verdadeira) então ele executa o código a cima .No html na minha barra de login eu coloquei um texto se o login for mal sucedido ele da a mensagem "Login e(ou) Senha Errado!" e da uma imagem bloqueado:

Próximo bloco e último:

if (loginsite.value == loginJson1 || loginJson2 || loginJson3){
	if(loginsite.value == loginJson1){
		senha = objJson.logins.login1.senha;
		name = objJson.logins.login1.nome;
		if(senhasite.value == senha){
			document.getElementById("imglogin").src = "imagens/login.png";
			document.getElementById("txtlog").innerHTML = "Ola " + name;
		} else {
			document.getElementById("imglogin").src = "imagens/erro.png";
			document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
		}
     }
	if(loginsite.value == loginJson2){
		senha = objJson.logins.login2.senha;
		name = objJson.logins.login2.nome;
		if(senhasite.value == senha){
			document.getElementById("imglogin").src = "imagens/login.png";
			document.getElementById("txtlog").innerHTML = "Ola " + name;
		} else {
			document.getElementById("imglogin").src = "imagens/erro.png";
			document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
		}
     }
	if(loginsite.value == loginJson3){
		senha = objJson.logins.login3.senha;
		name = objJson.logins.login3.nome;
		if(senhasite.value == senha){
			document.getElementById("imglogin").src = "imagens/login.png";
			document.getElementById("txtlog").innerHTML = "Ola " + name;
		} else {
			document.getElementById("imglogin").src = "imagens/erro.png";
			document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
		}
     }
}

Vamos por partes:

if (loginsite.value == loginJson1 || loginJson2 || loginJson3){

esse primeiro if analisa se o que o usuário inseriu no input de login no HTML é igual a algum dos logins do arquivo .json e caso algum deles for ele executa o seu interior:

	if(loginsite.value == loginJson1){
		senha = objJson.logins.login1.senha;
		name = objJson.logins.login1.nome;
		if(senhasite.value == senha){
			document.getElementById("imglogin").src = "imagens/login.png";
			document.getElementById("txtlog").innerHTML = "Ola " + name;
		} else {
			document.getElementById("imglogin").src = "imagens/erro.png";
			document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
		}
     }
	if(loginsite.value == loginJson2){
		senha = objJson.logins.login2.senha;
		name = objJson.logins.login2.nome;
		if(senhasite.value == senha){
			document.getElementById("imglogin").src = "imagens/login.png";
			document.getElementById("txtlog").innerHTML = "Ola " + name;
		} else {
			document.getElementById("imglogin").src = "imagens/erro.png";
			document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
		}
     }
	if(loginsite.value == loginJson3){
		senha = objJson.logins.login3.senha;
		name = objJson.logins.login3.nome;
		if(senhasite.value == senha){
			document.getElementById("imglogin").src = "imagens/login.png";
			document.getElementById("txtlog").innerHTML = "Ola " + name;
		} else {
			document.getElementById("imglogin").src = "imagens/erro.png";
			document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
		}
     }

agora explicando o seu interior:

	if(loginsite.value == loginJson1){
		senha = objJson.logins.login1.senha;
		name = objJson.logins.login1.nome;
		if(senhasite.value == senha){
			document.getElementById("imglogin").src = "imagens/login.png";
			document.getElementById("txtlog").innerHTML = "Ola " + name;
		} else {
			document.getElementById("imglogin").src = "imagens/erro.png";
			document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
		}
     }

Primeiro ele verifica qual dos logins é o correto com a condição if

	if(loginsite.value == loginJson1){
                    ou
	if(loginsite.value == loginJson2){
                    ou
	if(loginsite.value == loginJson3){

ao achar a condição correta ele executa o bloco correto, vamos supor que é o primeiro if:

	if(loginsite.value == loginJson1){
		senha = objJson.logins.login1.senha;
		name = objJson.logins.login1.nome;
		if(senhasite.value == senha){
			document.getElementById("imglogin").src = "imagens/login.png";
			document.getElementById("txtlog").innerHTML = "Ola " + name;
		} else {
			document.getElementById("imglogin").src = "imagens/erro.png";
			document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
		}
     }

primeira mente vejamos ele sabe que o que o usuário digitou é igual ( == ) ao que esta na variável LoginJson1 que tem o valor do login da array login1 do arquivo JSON, em seguida ele executa:

senha = objJson.logins.login1.senha;
name = objJson.logins.login1.nome;

a variável senha vai buscar na variável objJson que contem as arrays do arquivo teste.json, o valor da variável senha que esta na array logins dentro da outra array login1(obs: se fosse o caso de que o usuário digitasse o login2 ela iria puxar no login2 ou se ele digitase o login3 ela puxaria no login3), e a variável name vai fazer o mesmo só que em vez de pegar o valor da variável senha ela vai pegar a da variável nome e guardar na name.

if(senhasite.value == senha){

Aqui ele vai verificar se o valor da variável senha é igual ( == ) a o que o usuário digitou e o JavaScript armazenou na variável senhasite se for True(verdadeiro) executa seu interior ou se for False(falso) o bloco é saltado(ignorado) e vai direto para o else que só é executado quando o a condição do if da senha for False(falso)

Vamos para a condição True(verdadeiro):

if(senhasite.value == senha){
	document.getElementById("imglogin").src = "imagens/login.png";
	document.getElementById("txtlog").innerHTML = "Ola " + name;
}

Aqui ele vai dar uma imagem que o login foi efetuado corretamente e a mensagem "Ola " + name que é a variável que obtemos acima.

Resultado:

e se for False(falso) a condição if:

else {
	document.getElementById("imglogin").src = "imagens/erro.png";
    document.getElementById("txtlog").innerHTML = "Login e(ou) Senha Errado!";
     }

que o Resultado é:

Próximo bloco:

xhttp.open("GET", "teste.json", true);  
xhttp.send();

Usamos o método open do objeto XMLHttpRequest para abrir o o arquivo e obter os dados do aqruivo teste.json caso o seu arquivo tenha um destinatário no servido coloque aonde esta o teste.json

exemplo:

 xhttp.open("GET", "URL DO DESTINATARIO", true);
						ex:
 xhttp.open("GET", "arquivos/JSON/arqUsuarios.json", true);

você so vai precisar editar ali e mais em nenhum lugar

e o método send do objeto XMLHttpRequest para enviar o pedido ao servidor.

Bom é isto se você quiser estudar mais tenho alguns links:

https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp

https://www.w3schools.com/js/js_json_intro.asp

https://www.w3schools.com/js/js_ajax_intro.asp

Lembrando esse método eu uso para logins internos aonde no código eu coloco o login a senha o nome mais com o mesmo método mudando algumas coisas você pode usar para logins de usuários remotos

Espero ter ajudado!!